Merge pull request #1963 from smeup/feat/mobile-kup-tab-bar-responsive

Feat/mobile kup tab bar responsive
smeup · Jun 27, 2024 · 068d755 · 068d755
2 parents 861aaeb + 3734362
commit 068d755
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
@@ -169,7 +169,13 @@
         line-height: 1;
         z-index: 2;
         color: var(--kup_tabbar_text_color);
-        min-width: 150px;
+        min-width: auto;
+      }
+
+      @media screen and (min-width: 678px) {
+        .tab__text-label {
+          min-width: 150px;
+        }
       }
     }
 

diff --git a/packages/ketchup/src/tab-bar.html b/packages/ketchup/src/tab-bar.html
@@ -45,6 +45,7 @@ <h4>Events testing</h4>
         <kup-tab-bar id="event-tabbar"></kup-tab-bar>
         <kup-tab-bar></kup-tab-bar>
         <kup-tab-bar></kup-tab-bar>
+        <kup-tab-bar></kup-tab-bar>
 
         <script>
             let tabBar = document.getElementsByTagName('kup-tab-bar')[0];
@@ -120,6 +121,19 @@ <h4>Events testing</h4>
                     active: false,
                 },
             ];
+            let tabBar4 = document.getElementsByTagName('kup-tab-bar')[3];
+            tabBar4.data = [
+                {
+                    id: '1',
+                    value: 'Favorites',
+                    active: true,
+                },
+                {
+                    id: '2',
+                    value: 'Alarm clock',
+                    active: false,
+                },
+            ];
         </script></body
     >
 </html>