feat: Add responsive tab styles (#4997)

app/javascript/dashboard/assets/scss/_variables.scss

@@ -99,3 +99,7 @@ $ionicons-font-path: '~ionicons/fonts';
 
 // Transitions
 $transition-ease-in: all 0.250s ease-in;
+
+:root {
+  --dashboard-app-tabs-height: 3.9rem;
+}

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -1,9 +1,34 @@
+.tabs--container {
+  display: flex;
+}
+
+.tabs--container--with-border {
+  @include border-normal-bottom;
+}
+
 .tabs {
   @include padding($zero $space-normal);
-  @include border-normal-bottom;
   border-left-width: 0;
   border-right-width: 0;
   border-top-width: 0;
+  display: flex;
+  min-width: var(--space-mega);
+}
+
+.tabs--with-scroll {
+  max-width: calc(100% - 64px);
+  overflow: hidden;
+  padding: 0 var(--space-smaller);
+}
+
+.tabs--scroll-button {
+  align-items: center;
+  border-radius: 0;
+  cursor: pointer;
+  display: flex;
+  height: auto;
+  justify-content: center;
+  min-width: var(--space-large);
 }
 
 // Tab chat type
@@ -22,6 +47,7 @@
 
 .tabs-title {
   @include margin($zero $space-slab);
+  flex-shrink: 0;
 
   .badge {
     background: $color-background;