Use x-overflow for tab navigation (#2337)

* Use x-overflow for tab navigation

* Define all CSS for tabs in nav.module.css

pages/satistics/index.js

@@ -17,7 +17,7 @@ import ItemJob from '@/components/item-job'
 import PageLoading from '@/components/page-loading'
 import PayerData from '@/components/payer-data'
 import { Badge } from 'react-bootstrap'
-import navStyles from '../settings/settings.module.css'
+import navStyles from '@/styles/nav.module.css'
 import classNames from 'classnames'
 
 export const getServerSideProps = getGetServerSideProps({ query: WALLET_HISTORY, authRequired: true })

pages/settings/index.js

@@ -28,7 +28,7 @@ import { useMe } from '@/components/me'
 import { INVOICE_RETENTION_DAYS, ZAP_UNDO_DELAY_MS } from '@/lib/constants'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { useField } from 'formik'
-import styles from './settings.module.css'
+import styles from '@/styles/nav.module.css'
 import { AuthBanner } from '@/components/banners'
 
 export const getServerSideProps = getGetServerSideProps({ query: SETTINGS, authRequired: true })

styles/nav.module.css

@@ -1,4 +1,10 @@
 .nav {
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    padding-bottom: 0.5rem;
     margin: 1rem 0;
     justify-content: start;
     font-size: 110%;
@@ -12,8 +18,3 @@
 .nav :global .active {
     border-bottom: 2px solid var(--bs-primary);
 }
-
-.alert {
-    color: var(--bs-danger);
-    margin-bottom: 10px;
-}

styles/wallet.module.css

@@ -93,16 +93,6 @@
   margin-left: 0.5rem;
 }
 
-.nav {
-  justify-content: center;
-  font-size: 110%;
-  gap: 0 0.5rem;
-}
-
-.nav :global .active {
-  border-bottom: 2px solid var(--bs-primary);
-}
-
 .form {
   display: flex;
   justify-content: center;

wallets/client/components/forms.js

@@ -6,12 +6,14 @@ import { useRouter } from 'next/router'
 import { WalletLayout, WalletLayoutHeader, WalletLayoutImageOrName, WalletLogs } from '@/wallets/client/components'
 import { protocolDisplayName, protocolFields, protocolClientSchema, unurlify, urlify, isWallet, isTemplate, walletLud16Domain } from '@/wallets/lib/util'
 import styles from '@/styles/wallet.module.css'
+import navStyles from '@/styles/nav.module.css'
 import { Checkbox, Form, Input, PasswordInput, SubmitButton } from '@/components/form'
 import CancelButton from '@/components/cancel-button'
 import { useWalletProtocolUpsert, useWalletProtocolRemove, useWalletQuery, TemplateLogsProvider } from '@/wallets/client/hooks'
 import { useToast } from '@/components/toast'
 import Text from '@/components/text'
 import Info from '@/components/info'
+import classNames from 'classnames'
 
 const WalletFormsContext = createContext()
 
@@ -87,17 +89,17 @@ function WalletSendRecvSelector () {
   return (
     <Nav
       key={path}
-      className={styles.nav}
+      className={classNames(navStyles.nav, 'justify-content-center')}
       activeKey={selected}
     >
       <Nav.Item>
         <Link href={`/${path}/send`} passHref legacyBehavior replace>
-          <Nav.Link eventKey='send'>SEND</Nav.Link>
+          <Nav.Link className='ps-3' eventKey='send'>SEND</Nav.Link>
         </Link>
       </Nav.Item>
       <Nav.Item>
         <Link href={`/${path}/receive`} passHref legacyBehavior replace>
-          <Nav.Link eventKey='receive'>RECEIVE</Nav.Link>
+          <Nav.Link className='ps-3' eventKey='receive'>RECEIVE</Nav.Link>
         </Link>
       </Nav.Item>
     </Nav>
@@ -131,7 +133,7 @@ function WalletProtocolSelector () {
   return (
     <Nav
       key={path}
-      className={`${styles.nav} justify-content-start mt-3 mb-3`}
+      className={classNames(navStyles.nav, 'justify-content-start mt-0')}
       activeKey={selected}
     >
       {