From c605d12b9f7c11b3d837d2ede89e824ba4d4d673 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Wed, 26 Jun 2024 17:55:36 +0200
Subject: [PATCH 1/2] Update kup-tab-bar.scss

---
 .../ketchup/src/components/kup-tab-bar/kup-tab-bar.scss   | 8 +++++++-
 1 file changed, 7 insertions(+), 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
index 995cd05d38..6bfd2e39bc 100644
--- 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;
+        }
       }
     }
 

From 3734362d27f7063f01f5bbcb7e967ba83a1e53b8 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Wed, 26 Jun 2024 17:55:42 +0200
Subject: [PATCH 2/2] update example

---
 packages/ketchup/src/tab-bar.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/ketchup/src/tab-bar.html b/packages/ketchup/src/tab-bar.html
index 073a6555cf..60748c1412 100644
--- 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>