[PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width

[PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width

[Dominik Csapak]

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

applied: [PATCH yew-widget-toolkit] touch: slidable: use bounding client rect for width

[Thomas Lamprecht]

On Tue, 09 Jun 2026 09:11:10 +0200, Dominik Csapak wrote:
> 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.
> 
> [...]

Applied, thanks!

[1/1] touch: slidable: use bounding client rect for width
      commit: f77f00eaf468551ecc0bd7e626b024e13d719951