widgets: fix tabs overflow behaviour (#6517)

slint-ui · Oct 11, 2024 · f8f1d46 · f8f1d46
1 parent a6ff642
commit f8f1d46
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/internal/compiler/widgets/cosmic/tabwidget.slint b/internal/compiler/widgets/cosmic/tabwidget.slint
@@ -45,7 +45,7 @@ export component TabImpl inherits Rectangle {
     private property <bool> is-current: root.tab-index == root.current;
     private property <length> inner-border-radius: 8px;
 
-    min-width: max(160px, text.min-width);
+    min-width: max(32px, text.min-width);
     min-height: max(44px, text.min-height);
     horizontal-stretch: 0;
     vertical-stretch: 1;
@@ -140,10 +140,12 @@ export component TabBarImpl inherits TabBarBase {
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
     preferred-height: 44px;
 
-    HorizontalLayout {
-        @children
+    Flickable {
+        HorizontalLayout {
+            @children
+        }
     }
-
+    
     if focus-scope.has-focus: Rectangle {
         y: root.height - self.height;
         height: 1px;

diff --git a/internal/compiler/widgets/cupertino/tabwidget.slint b/internal/compiler/widgets/cupertino/tabwidget.slint
@@ -43,7 +43,7 @@ export component TabImpl inherits Rectangle {
     private property <bool> hide-right-border: root.tab-index == root.num-tabs - 1 || tab-index + 1 == current;
     private property <bool> is-current: root.tab-index == root.current;
 
-    min-width: max(160px, i-text.min-width);
+    min-width: max(32px, i-text.min-width);
     min-height: max(20px, i-text.min-height);
     horizontal-stretch: 1;
     vertical-stretch: 0;
@@ -122,11 +122,13 @@ export component TabBarImpl inherits TabBarBase {
         }
     }
 
-    HorizontalLayout {
-        min-height: 22px;
-        padding: 1px;
+    Flickable {
+        HorizontalLayout {
+            min-height: 22px;
+            padding: 1px;
 
-        @children
+            @children
+        }
     }
 
     i-focus-scope := FocusScope {

diff --git a/internal/compiler/widgets/fluent/tabwidget.slint b/internal/compiler/widgets/fluent/tabwidget.slint
@@ -43,7 +43,7 @@ export component TabImpl inherits Rectangle {
     private property <bool> hide-right-border: root.tab-index == root.num-tabs - 1 || tab-index + 1 == current;
     private property <bool> is-current: root.tab-index == root.current;
 
-    min-width: max(160px, i-text.min-width);
+    min-width: max(32px, i-text.min-width);
     min-height: max(32px, i-text.min-height);
     horizontal-stretch: 0;
     vertical-stretch: 0;
@@ -112,12 +112,12 @@ export component TabBarImpl inherits TabBarBase {
     // The currently focused tab
     in-out property <int> current-focused: i-focus-scope.has-focus ? i-focus-scope.focused-tab : -1;
 
-    HorizontalLayout {
-        alignment: start;
-
-        @children
+    Flickable {
+        HorizontalLayout {
+            @children
+        }
     }
-
+   
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
 

diff --git a/internal/compiler/widgets/material/tabwidget.slint b/internal/compiler/widgets/material/tabwidget.slint
@@ -42,7 +42,8 @@ export component TabImpl inherits Rectangle {
     private property <bool> has-focus: root.current-focused == root.tab-index;
     private property <bool> active: root.tab-index == root.current;
 
-    height: 48px;
+    width: max(48px, i-layout.min-width);
+    height: max(48px, i-layout.min-height);
     accessible-role: tab;
     accessible-label: root.title;
 
@@ -112,12 +113,12 @@ export component TabBarImpl inherits TabBarBase {
     accessible-role: tab-list;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current;
 
-    HorizontalLayout {
-        alignment: start;
-
-        @children
+    Flickable {
+        HorizontalLayout {            
+            @children
+        }
     }
-
+   
     i-focus-scope := FocusScope {
         property <int> focused-tab: 0;