Improve Console mobile responsiveness

frontend/app/[team]/access/layout.tsx

@@ -71,32 +71,35 @@ export default function AccessLayout({
 
   return (
     <div
-      className="w-full pt-3 sm:pt-4 lg:pt-6 text-zinc-900 dark:text-zinc-100 flex flex-col overflow-y-auto h-[calc(100vh-56px)]"
+      className="w-full pt-3 sm:pt-4 lg:pt-6 text-zinc-900 dark:text-zinc-100 flex flex-col overflow-y-auto h-[calc(100dvh_-_56px_-_var(--mobile-tabbar-height))]"
     >
       <div className="flex items-center gap-2 pb-3 sm:pb-4 lg:pb-6 px-3 sm:px-4 lg:px-6">
         <h1 className="text-lg sm:text-xl font-bold">Access</h1>
       </div>
 
       <Tab.Group selectedIndex={tabIndex} onChange={(index) => setTabIndex(index)}>
-        <Tab.List className="flex gap-2 w-full border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
-          {tabs.map((tab) => (
-            <Tab as={Fragment} key={tab.name}>
-              {({ selected }) => (
-                <Link
-                  href={`/${params.team}/access/${tab.link}`}
-                  className={clsx(
-                    'p-2 text-xs font-medium border-b -mb-px focus:outline-none transition ease',
-                    selected
-                      ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
-                      : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
-                  )}
-                >
-                  {tab.name}
-                </Link>
-              )}
-            </Tab>
-          ))}
-        </Tab.List>
+        {/* overflow-x-auto lives on the wrapper so the tabs' -mb-px underline isn't clipped */}
+        <div className="w-full overflow-x-auto">
+          <Tab.List className="flex gap-2 w-full min-w-max border-b border-neutral-500/20 px-3 sm:px-4 lg:px-6">
+            {tabs.map((tab) => (
+              <Tab as={Fragment} key={tab.name}>
+                {({ selected }) => (
+                  <Link
+                    href={`/${params.team}/access/${tab.link}`}
+                    className={clsx(
+                      'p-2 text-xs font-medium whitespace-nowrap border-b -mb-px focus:outline-none transition ease',
+                      selected
+                        ? 'border-emerald-500 font-semibold text-zinc-900 dark:text-zinc-100'
+                        : 'border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
+                    )}
+                  >
+                    {tab.name}
+                  </Link>
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </div>
         <div className="pt-4 flex-1 overflow-y-auto">{children}</div>
       </Tab.Group>
     </div>

frontend/app/[team]/access/members/page.tsx

@@ -94,7 +94,7 @@ export default function Members({ params }: { params: { team: string } }) {
           <p className="text-neutral-500 text-sm">Manage organisation members.</p>
         </div>
         <div className="space-y-4">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
@@ -126,6 +126,7 @@ export default function Members({ params }: { params: { team: string } }) {
             membersLoading && !membersData ? (
               <MemberListSkeleton count={10} />
             ) : (
+              <div className="overflow-x-auto">
               <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
                 <thead>
                   <tr>
@@ -212,6 +213,7 @@ export default function Members({ params }: { params: { team: string } }) {
                   ))}
                 </tbody>
               </table>
+              </div>
             )
           ) : (
             <EmptyState

frontend/app/[team]/access/network/page.tsx

@@ -59,7 +59,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
 
           {userCanReadNetworkPolicies ? (
             allPolicies.length > 0 ? (
-              <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
+              <div className="w-full overflow-x-auto">
+                <table className="table-auto w-full min-w-[48rem] divide-y divide-zinc-500/40">
                 <thead>
                   <tr>
                     <th className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -133,7 +134,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
                     </tr>
                   ))}
                 </tbody>
-              </table>
+                </table>
+              </div>
             ) : (
               <EmptyState
                 title="No policies"
@@ -181,7 +183,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
 
             {userCanReadNetworkPolicies ? (
               globalPolicies.length > 0 ? (
-                <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
+                <div className="w-full overflow-x-auto">
+                  <table className="table-auto w-full min-w-[36rem] divide-y divide-zinc-500/40">
                   <thead>
                     <tr>
                       <th className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -214,7 +217,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                  </table>
+                </div>
               ) : (
                 <EmptyState
                   title="No Global Policies"

frontend/app/[team]/access/service-accounts/page.tsx

@@ -54,7 +54,7 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
           <p className="text-neutral-500 text-sm">Manage service accounts.</p>
         </div>
         <div className="space-y-4">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
@@ -100,7 +100,8 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
                 </>
               </EmptyState>
             ) : (
-              <table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
+              <div className="w-full overflow-x-auto">
+                <table className="table-auto w-full min-w-[42rem] divide-y divide-zinc-500/40">
                 <thead>
                   <tr>
                     <th className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -166,7 +167,8 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
                     </tr>
                   ))}
                 </tbody>
-              </table>
+                </table>
+              </div>
             )
           ) : (
             <EmptyState

frontend/app/[team]/apps/[app]/_components/AppSecrets.tsx

@@ -973,15 +973,15 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
           </div>
         </div>
 
-        <div className="flex items-center w-full justify-between border-b border-neutral-500/20 pb-4">
-          <div className="flex items-center gap-2">
-            <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2">
+        <div className="flex w-full flex-col items-stretch justify-between gap-2 border-b border-neutral-500/20 pb-4 sm:flex-row sm:items-center">
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="relative flex min-w-0 flex-1 items-center rounded-md bg-zinc-100 px-2 dark:bg-zinc-800 sm:flex-none">
               <div className="">
                 <FaSearch className="text-neutral-500" />
               </div>
               <input
                 placeholder="Search keys or values"
-                className="custom bg-zinc-100 dark:bg-zinc-800"
+                className="custom min-w-0 w-full bg-zinc-100 dark:bg-zinc-800 sm:w-auto"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
@@ -1002,7 +1002,7 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
             </div>
           </div>
 
-          <div className="flex flex-col items-end gap-4 pr-4">
+          <div className="flex flex-col items-end gap-4 sm:pr-4">
             <div className="flex gap-2 items-center">
               {unsavedChanges && (
                 <Button variant="outline" onClick={handleDiscardChanges} title="Discard changes">
@@ -1054,8 +1054,8 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
         />
 
         {(filteredSecrets.length > 0 || filteredDynamicSecrets.length > 0) && (
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex flex-wrap items-center gap-2 sm:gap-4">
               <Button
                 variant="secondary"
                 disabled={allRowsAreExpanded}
@@ -1097,7 +1097,7 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
                 </span>
               </label>
             </div>
-            <div className="flex justify-end pr-4 gap-4">
+            <div className="flex justify-end gap-2 sm:gap-4 sm:pr-4">
               <Button variant="secondary" onClick={() => importDialogRef.current?.openModal()}>
                 <TbDownload /> Import secrets
               </Button>

frontend/app/[team]/apps/[app]/access/layout.tsx

@@ -52,23 +52,23 @@ export default function AccessLayout({
 
   return (
     <div
-      className="w-full px-3 sm:px-4 lg:px-6 py-3 sm:py-4 lg:py-6 pb-0 sm:pb-0 lg:pb-0 text-black dark:text-white flex flex-col overflow-y-auto space-y-3 sm:space-y-4 lg:space-y-6 h-[calc(100vh-56px)]"
+      className="w-full min-h-0 flex-1 px-3 sm:px-4 lg:px-6 py-3 sm:py-4 lg:py-6 pb-0 sm:pb-0 lg:pb-0 text-black dark:text-white flex flex-col overflow-y-auto space-y-3 sm:space-y-4 lg:space-y-6"
     >
       <div>
         <h1 className="text-base sm:text-lg font-bold">Access</h1>
         <div className="text-neutral-500">Manage user and service account access in this App</div>
       </div>
 
       <Tab.Group selectedIndex={tabIndex} onChange={(index) => setTabIndex(index)}>
-        <div className="grid grid-cols-[max-content_1fr] gap-3 sm:gap-4 lg:gap-6 h-full divide-x divide-neutral-500/40">
-          <Tab.List className="flex flex-col gap-2 w-full ">
+        <div className="flex min-h-0 flex-col gap-3 md:grid md:grid-cols-[max-content_1fr] md:gap-4 lg:gap-6 md:h-full md:divide-x md:divide-neutral-500/40">
+          <Tab.List className="flex w-full shrink-0 gap-2 overflow-x-auto border-b border-neutral-500/20 pb-1 md:flex-col md:overflow-visible md:border-b-0 md:pb-0">
             {tabs.map((tab) => (
               <Tab as={Fragment} key={tab.name}>
                 {({ selected }) => (
                   <Link
                     href={`/${params.team}/apps/${params.app}/access/${tab.link}`}
                     className={clsx(
-                      'p-2 text-xs font-medium border-l rounded-r-lg focus:outline-none transition ease',
+                      'p-2 text-xs font-medium whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg focus:outline-none transition ease',
                       selected
                         ? 'border-emerald-500 font-semibold bg-zinc-300 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100'
                         : ' border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100'
@@ -85,7 +85,7 @@ export default function AccessLayout({
               </Tab>
             ))}
           </Tab.List>
-          <div className="h-full">{children}</div>
+          <div className="min-w-0 h-full">{children}</div>
         </div>
       </Tab.Group>
     </div>

frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx

@@ -304,7 +304,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
           })
 
     return (
-      <Menu as="div" className="relative inline-block text-left group w-96">
+      <Menu as="div" className="relative inline-block w-full max-w-96 text-left group">
         {({ open }) => (
           <>
             <Menu.Button as={Fragment}>
@@ -322,7 +322,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
               leaveFrom="transform scale-100 opacity-100"
               leaveTo="transform scale-95 opacity-0"
             >
-              <Menu.Items className="absolute z-10 left-0 origin-top-right mt-2 divide-y divide-neutral-500/40 p-px rounded-md shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
+              <Menu.Items className="absolute z-10 left-0 w-full origin-top-right mt-2 divide-y divide-neutral-500/40 p-px rounded-md shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
                 <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2 w-full text-sm">
                   <FaSearch className="text-neutral-500" />
 
@@ -357,7 +357,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
                         {({ active }) => (
                           <div
                             className={clsx(
-                              'flex items-center justify-between gap-2 p-2 text-sm cursor-pointer transition ease w-full min-w-96',
+                              'flex items-center justify-between gap-2 p-2 text-sm cursor-pointer transition ease w-full',
                               active ? 'bg-neutral-100 dark:bg-neutral-800' : ''
                             )}
                             onClick={() => {
@@ -472,7 +472,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
             </p>
 
             <div className="space-y-2">
-              <div className="flex items-center justify-between gap-4">
+              <div className="hidden items-center justify-between gap-4 sm:flex">
                 <div className="w-1/2 text-2xs font-medium text-gray-500 uppercase tracking-wider">
                   Member
                 </div>
@@ -482,9 +482,9 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
                 <div className="w-9"></div>
               </div>
               {selectedMembers.map((member, index) => (
-                <div key={member.id} className="space-y-1 flex items-center justify-between gap-2">
+                <div key={member.id} className="flex flex-col gap-2 rounded-lg border border-neutral-500/20 p-2 sm:flex-row sm:items-center sm:justify-between sm:border-0 sm:p-0">
                   <div
-                    className={clsx('flex items-center justify-between gap-2 p-1 text-sm w-1/2')}
+                    className={clsx('flex w-full min-w-0 items-center justify-between gap-2 p-1 text-sm sm:w-1/2')}
                   >
                     <div className="flex items-center gap-2">
                       <Avatar member={member} size="md" />
@@ -499,7 +499,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
                     </div>
                     <RoleLabel role={member.role!} />
                   </div>
-                  <div className="w-1/2">
+                  <div className="w-full sm:w-1/2">
                     {userCanReadEnvironments ? (
                       <Listbox
                         multiple

frontend/app/[team]/apps/[app]/access/members/page.tsx

@@ -93,7 +93,7 @@ export default function Members({ params }: { params: { team: string; app: strin
       </div>
       {userCanReadAppMembers ? (
         <div className="space-y-4">
-          <div className="flex items-center justify-between pl-4">
+          <div className="flex flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between sm:pr-0">
             <div className="relative flex items-center bg-zinc-100 dark:bg-zinc-800 rounded-md px-2  w-full max-w-sm">
               <div className="">
                 <FaSearch className="text-neutral-500" />
@@ -121,7 +121,8 @@ export default function Members({ params }: { params: { team: string; app: strin
             )}
           </div>
 
-          <table className="table-auto min-w-full divide-y divide-zinc-500/40">
+          <div className="w-full overflow-x-auto">
+            <table className="table-auto w-full min-w-[36rem] divide-y divide-zinc-500/40">
             <thead>
               <tr>
                 <th className="px-6 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -186,7 +187,8 @@ export default function Members({ params }: { params: { team: string; app: strin
                 </tr>
               ))}
             </tbody>
-          </table>
+            </table>
+          </div>
         </div>
       ) : (
         <EmptyState

frontend/app/[team]/apps/[app]/access/tokens/page.tsx

@@ -246,17 +246,17 @@ export default function Tokens({ params }: { params: { team: string; app: string
   }
 
   return (
-    <div className="w-full overflow-y-auto relative text-black dark:text-white space-y-16 px-8">
+    <div className="w-full overflow-y-auto relative text-black dark:text-white space-y-16 px-3 sm:px-8">
       {userCanReadTokens ? (
         <section className="max-w-screen-xl">
           {keyring !== null && (
-            <div className="flex gap-8 mt-6 divide-x divide-neutral-500/20 items-start">
-              <div className="space-y-4 border-l border-neutral-500/40 h-min">
+            <div className="flex flex-col gap-4 mt-6 md:flex-row md:gap-8 md:divide-x md:divide-neutral-500/20 md:items-start">
+              <div className="flex w-full gap-2 overflow-x-auto border-b border-neutral-500/40 pb-2 md:block md:w-auto md:space-y-4 md:overflow-visible md:border-b-0 md:border-l md:pb-0">
                 <div
                   role="button"
                   onClick={() => setActivePanel('secrets')}
                   className={clsx(
-                    'p-4 cursor-pointer border-l rounded-r-lg transition ease -ml-px w-60',
+                    'p-3 md:p-4 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60',
                     activePanel === 'secrets'
                       ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500'
                       : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40'
@@ -269,7 +269,7 @@ export default function Tokens({ params }: { params: { team: string; app: string
                     role="button"
                     onClick={() => setActivePanel('kms')}
                     className={clsx(
-                      'p-4 cursor-pointer border-l rounded-r-lg transition ease -ml-px w-60',
+                      'p-3 md:p-4 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60',
                       activePanel === 'kms'
                         ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500'
                         : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40'
@@ -282,7 +282,7 @@ export default function Tokens({ params }: { params: { team: string; app: string
                   </div>
                 )}
               </div>
-              <div className="overflow-y-auto px-4">
+              <div className="min-w-0 w-full overflow-x-auto px-0 sm:px-4">
                 {app && activePanel === 'secrets' && (
                   <SecretTokens organisationId={organisation!.id} appId={params.app} />
                 )}