public inbox for yew-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width
Date: Tue,  9 Jun 2026 09:11:10 +0200	[thread overview]
Message-ID: <20260609071200.411677-1-d.csapak@proxmox.com> (raw)

when calculating the width of the left and right actions, using
offsetWidth is problematic since it's always returned as an integer[0].
Since the browser calculates the sizes with fractional pixels, it can
happen that this is too narrow, impacting the flex layout. It'll always
be less than one pixel, but it can lead to e.g. text wrapping or similar
effects, disturbing the overall layout here.

Using the width of boundingClientRect returns a floating point, so this
should be the correct size (including sub-pixels).

0: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
this is not a replacement for the assets fix for setting the nowrap on
the slidable action, but it is an additional correctness fix.

 src/touch/slidable/mod.rs | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/touch/slidable/mod.rs b/src/touch/slidable/mod.rs
index ae45e29..d1959ba 100644
--- a/src/touch/slidable/mod.rs
+++ b/src/touch/slidable/mod.rs
@@ -266,8 +266,9 @@ impl Component for PwtSlidable {
                     .left_action_ref
                     .cast::<web_sys::HtmlElement>()
                     .unwrap()
-                    .offset_width()
-                    .max(0) as f64;
+                    .get_bounding_client_rect()
+                    .width()
+                    .max(0.0);
 
                 if width > (left_size + 1.0) {
                     self.left_size = left_size;
@@ -283,8 +284,9 @@ impl Component for PwtSlidable {
                     .right_action_ref
                     .cast::<web_sys::HtmlElement>()
                     .unwrap()
-                    .offset_width()
-                    .max(0) as f64;
+                    .get_bounding_client_rect()
+                    .width()
+                    .max(0.0);
 
                 if width > (right_size + 1.0) {
                     self.right_size = right_size;
-- 
2.47.3





             reply	other threads:[~2026-06-09  7:12 UTC|newest]

Thread overview: 2+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-06-09  7:11 Dominik Csapak [this message]
2026-06-09 16:50 ` applied: [PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width Thomas Lamprecht

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20260609071200.411677-1-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=yew-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal