update ui components for mobile (#1495)

* fix mobile layout for filter buttons

* fix tabs component mobile view

* fix zoom in on input focus on mobile devices

* reduce searchbar font-size

src/components/@shared/atoms/Tabs/index.module.css

@@ -1,14 +1,20 @@
+.tabListContainer {
+  margin-left: auto;
+  margin-right: auto;
+  border-bottom: 1px solid var(--border-color);
+  max-width: 100%;
+}
+
 .tabList {
   text-align: center;
-  border-bottom: 1px solid var(--border-color);
   padding: calc(var(--spacer) / 2);
   display: flex;
-  justify-content: center;
+  overflow-x: auto;
 }
 
 .tab {
   display: inline-block;
-  padding: calc(var(--spacer) / 8) var(--spacer);
+  padding: calc(var(--spacer) / 8) calc(var(--spacer) / 2);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-small);
   text-transform: uppercase;
@@ -16,7 +22,6 @@
   background-color: var(--background-body);
   border: 1px solid var(--border-color);
   margin-right: -1px;
-  min-width: 90px;
 }
 
 .tab,
@@ -27,11 +32,13 @@
 .tab:first-child {
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
+  margin-left: auto;
 }
 
 .tab:last-child {
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
+  margin-right: auto;
 }
 
 .tab[aria-selected='true'] {
@@ -58,6 +65,12 @@
   }
 }
 
+@media (min-width: 60rem) {
+  .tab {
+    padding: calc(var(--spacer) / 8) var(--spacer);
+  }
+}
+
 .radio {
   composes: radio from '../../FormInput/InputRadio.module.css';
 }

src/components/@shared/atoms/Tabs/index.tsx

@@ -26,12 +26,15 @@ export default function Tabs({
 }: TabsProps): ReactElement {
   return (
     <ReactTabs className={`${className || ''}`} defaultIndex={defaultIndex}>
+      <div className={styles.tabListContainer}>
         <TabList className={styles.tabList}>
           {items.map((item, index) => (
             <Tab
               className={styles.tab}
               key={index}
-            onClick={handleTabChange ? () => handleTabChange(item.title) : null}
+              onClick={
+                handleTabChange ? () => handleTabChange(item.title) : null
+              }
               disabled={item.disabled}
             >
               {showRadio ? (
@@ -48,6 +51,7 @@ export default function Tabs({
             </Tab>
           ))}
         </TabList>
+      </div>
       <div className={styles.tabContent}>
         {items.map((item, index) => (
           <TabPanel key={index}>{item.content}</TabPanel>

src/components/Header/SearchBar.module.css

@@ -26,6 +26,7 @@
 }
 
 .input {
+  font-size: 16px; /* prevent zoom in on input focus on mobile devices  */
   background-color: transparent;
   height: 36px;
   margin: 0;

src/components/Search/Filters.module.css

@@ -1,16 +1,14 @@
 .filterList,
 div.filterList {
   white-space: normal;
+  margin-top: 0;
   margin-bottom: 0;
   display: flex;
-  flex-direction: row;
+  gap: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
+  flex-direction: column;
   align-items: baseline;
 }
 
-.separator {
-  width: calc(var(--spacer) / 2);
-}
-
 .filter {
   display: inline-block;
 }
@@ -65,3 +63,10 @@ button.filter,
 .hideClear {
   display: none !important;
 }
+
+@media screen and (min-width: 35rem) {
+  .filterList,
+  div.filterList {
+    flex-direction: row;
+  }
+}

src/components/Search/Filters.tsx

@@ -137,6 +137,7 @@ export default function FilterPrice({
 
   return (
     <div className={styleClasses}>
+      <div>
         {serviceFilterItems.map((e, index) => {
           const isServiceSelected =
             e.value === serviceType || serviceSelections.includes(e.value)
@@ -158,7 +159,8 @@ export default function FilterPrice({
             </Button>
           )
         })}
-      <div className={styles.separator} />
+      </div>
+      <div>
         {accessFilterItems.map((e, index) => {
           const isAccessSelected =
             e.value === accessType || accessSelections.includes(e.value)
@@ -198,5 +200,6 @@ export default function FilterPrice({
           )
         })}
       </div>
+    </div>
   )
 }

src/components/Search/index.module.css

@@ -12,7 +12,7 @@
   margin-bottom: calc(var(--spacer) / 2);
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 55rem) {
   .row {
     flex-direction: row;
   }

src/components/Search/sort.module.css

@@ -8,7 +8,7 @@
   overflow-y: auto;
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 55rem) {
   .sortList {
     align-self: flex-end;
     overflow-y: unset;