feat: Add responsive tab styles (#4997)

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>
     );
   },
 };