From 5a07210de44f7d8f881bff6905e24201a7cc19b6 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Sun, 29 May 2022 11:52:04 +1000
Subject: [PATCH] pass an optional width

---
 components/mobile/SwipeableTabs.tsx | 19 +++++++++++++++++--
 pages/markets.tsx                   |  1 +
 styles/index.css                    |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/mobile/SwipeableTabs.tsx b/components/mobile/SwipeableTabs.tsx
index e0f06d52..6909853b 100644
--- a/components/mobile/SwipeableTabs.tsx
+++ b/components/mobile/SwipeableTabs.tsx
@@ -11,7 +11,17 @@ import {
 
 type scrollVisibilityApiType = React.ContextType<typeof VisibilityContext>
 
-function SwipeableTabs({ items, onChange, tabIndex }) {
+function SwipeableTabs({
+  items,
+  onChange,
+  tabIndex,
+  width,
+}: {
+  items: any[]
+  onChange: (x) => void
+  tabIndex: number
+  width?: string
+}) {
   const { dragStart, dragStop, dragMove, dragging } = useDrag()
 
   const handleDrag =
@@ -70,6 +80,7 @@ function SwipeableTabs({ items, onChange, tabIndex }) {
             key={item}
             onClick={handleItemClick(i.toString())}
             selected={i === tabIndex}
+            width={width}
           />
         ))}
       </ScrollMenu>
@@ -110,11 +121,13 @@ function Tab({
   selected,
   onClick,
   title,
+  width,
 }: {
   itemId: string
   selected: boolean
   onClick: (x) => void
   title: string
+  width?: string
 }) {
   const { t } = useTranslation('common')
   const visibility = React.useContext(VisibilityContext)
@@ -130,7 +143,9 @@ function Tab({
       onClick={() => onClick(visibility)}
       role="button"
       tabIndex={0}
-      className={`relative flex h-10 w-28 items-center justify-center font-bold focus:text-th-primary focus:outline-none ${
+      className={`relative flex h-10 ${
+        width ? width : 'w-28'
+      } items-center justify-center font-bold focus:text-th-primary focus:outline-none ${
         selected
           ? 'border-b-2 border-th-primary text-th-primary'
           : 'border-b border-th-fgd-4 text-th-fgd-3'
diff --git a/pages/markets.tsx b/pages/markets.tsx
index c7c3cf7d..664c31dd 100644
--- a/pages/markets.tsx
+++ b/pages/markets.tsx
@@ -56,6 +56,7 @@ export default function Markets() {
                 onChange={handleChangeViewIndex}
                 items={TABS}
                 tabIndex={viewIndex}
+                width="w-full"
               />
             )}
           </div>
diff --git a/styles/index.css b/styles/index.css
index 55520b01..0fec515a 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -524,3 +524,7 @@ body::-webkit-scrollbar-corner {
 .keep-break {
   word-break: keep-all;
 }
+
+.react-horizontal-scrolling-menu--item {
+  @apply w-full;
+}