[yew-devel] [PATCH yew-widget-toolkit] widget: tab panel: fix tab bar bottom border

* [yew-devel] [PATCH yew-widget-toolkit] widget: tab panel: fix tab bar bottom border
@ 2025-08-28  8:32 Dominik Csapak
  2025-09-02  6:56 ` [yew-devel] applied: " Dietmar Maurer
  0 siblings, 1 reply; 2+ messages in thread
From: Dominik Csapak @ 2025-08-28  8:32 UTC (permalink / raw)
  To: yew-devel

commit:
 028af44 (pwt-tab-material: do not set flex property)

in pwt-assets removed the flex property from the css class of the tab
bar, because we also use the tab bar outside of the tab panel sometimes
(and the flex layout is not always correct there)

later, wrong layout was noticed, but only when scroll-mode was set to
`None` by commit:
 4aad755 (fix tab panel layout when scroll_mode is None)

We actually want to set the flex property with every scroll mode,
otherwise the bottom border of the tab bar does not fill all the way to
the right with tab panels.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/tab/tab_panel.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/widget/tab/tab_panel.rs b/src/widget/tab/tab_panel.rs
index 642df54..cd8bce9 100644
--- a/src/widget/tab/tab_panel.rs
+++ b/src/widget/tab/tab_panel.rs
@@ -2,13 +2,13 @@ use yew::html::IntoPropValue;
 use yew::prelude::*;
 use yew::virtual_dom::{Key, VList, VNode};
 
-use crate::prelude::*;
 use crate::props::{IntoOptionalInlineHtml, IntoStorageLocation, StorageLocation};
 use crate::state::Selection;
 use crate::widget::{
     Column, MiniScroll, MiniScrollMode, SelectionView, SelectionViewRenderInfo, TabBar, TabBarItem,
     TabBarStyle,
 };
+use crate::{css, prelude::*};
 
 use pwt_macros::{builder, widget};
 
@@ -225,7 +225,7 @@ impl Component for PwtTabPanel {
             .selection(self.selection.clone())
             .style(props.tab_bar_style)
             .state_id(props.state_id.clone())
-            .class(props.scroll_mode.is_none().then(|| "pwt-flex-fill"))
+            .class(css::Flex::Fill)
             .into();
 
         if let Some(scroll_mode) = props.scroll_mode {
-- 
2.47.2



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel


^ permalink raw reply	[flat|nested] 2+ messages in thread