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;

app/javascript/dashboard/components/ui/Tabs/Tabs.js

@@ -5,8 +5,61 @@ export default {
       type: Number,
       default: 0,
     },
+    border: {
+      type: Boolean,
+      default: true,
+    },
   },
-  render() {
+  data() {
+    return { hasScroll: false };
+  },
+  created() {
+    window.addEventListener('resize', this.computeScrollWidth);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.computeScrollWidth);
+  },
+  mounted() {
+    this.computeScrollWidth();
+  },
+  methods: {
+    computeScrollWidth() {
+      const tabElement = this.$el.getElementsByClassName('tabs')[0];
+      this.hasScroll = tabElement.scrollWidth > tabElement.clientWidth;
+    },
+    onScrollClick(direction) {
+      const tabElement = this.$el.getElementsByClassName('tabs')[0];
+      let scrollPosition = tabElement.scrollLeft;
+      if (direction === 'left') {
+        scrollPosition -= 100;
+      } else {
+        scrollPosition += 100;
+      }
+      tabElement.scrollTo({
+        top: 0,
+        left: scrollPosition,
+        behavior: 'smooth',
+      });
+    },
+    createScrollButton(createElement, direction) {
+      if (!this.hasScroll) {
+        return false;
+      }
+      return createElement(
+        'button',
+        {
+          class: 'tabs--scroll-button button clear secondary button--only-icon',
+          on: { click: () => this.onScrollClick(direction) },
+        },
+        [
+          createElement('fluent-icon', {
+            props: { icon: `chevron-${direction}`, size: 16 },
+          }),
+        ]
+      );
+    },
+  },
+  render(createElement) {
     const Tabs = this.$slots.default
       .filter(
         node =>
@@ -18,14 +71,21 @@ export default {
         data.index = index;
         return node;
       });
+    const leftButton = this.createScrollButton(createElement, 'left');
+    const rightButton = this.createScrollButton(createElement, 'right');
     return (
-      <ul
+      <div
         class={{
-          tabs: true,
+          'tabs--container--with-border': this.border,
+          'tabs--container': true,
         }}
       >
-        {Tabs}
-      </ul>
+        {leftButton}
+        <ul class={{ tabs: true, 'tabs--with-scroll': this.hasScroll }}>
+          {Tabs}
+        </ul>
+        {rightButton}
+      </div>
     );
   },
 };

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -141,6 +141,7 @@ export default {
 .dashboard-app--tabs {
   background: var(--white);
   margin-top: -1px;
+  min-height: var(--dashboard-app-tabs-height);
 }
 
 .messages-and-sidebar {

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -4,7 +4,11 @@
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
     >
-      <woot-tabs :index="selectedTabIndex" @change="onTabChange">
+      <woot-tabs
+        :index="selectedTabIndex"
+        :border="false"
+        @change="onTabChange"
+      >
         <woot-tabs-item
           v-for="tab in tabs"
           :key="tab.key"