Merge pull request #9195 from supabase/chore/add-scroll-to-users-table

Chore/add scroll to users table

studio/components/interfaces/Auth/Users/UserDropdown.tsx

@@ -156,11 +156,11 @@ const UserDropdown: FC<Props> = ({ user, canRemoveUser }) => {
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     You need additional permissions to delete users
                   </span>
                 </div>

studio/components/interfaces/Auth/Users/Users.tsx

@@ -53,8 +53,8 @@ const Users = () => {
   }
 
   return (
-    <div className="">
-      <div className="flex justify-between px-6 pt-6 pb-2">
+    <div className="overflow-scroll">
+      <div className="justify-between px-6 pt-6 pb-2 md:flex">
         <div className="relative flex space-x-4">
           <Input
             size="small"
@@ -94,7 +94,7 @@ const Users = () => {
             </Listbox.Option>
           </Listbox>
         </div>
-        <div className="flex items-center">
+        <div className="mt-4 flex items-center md:mt-0">
           <Button
             className="mr-2"
             size="tiny"
@@ -108,9 +108,9 @@ const Users = () => {
           {inviteEnabled && <InviteUserModal />}
         </div>
       </div>
-      <section className="overflow-visible mt-4 px-6">
-        <div className="relative section-block--body rounded">
-          <div className="align-middle inline-block min-w-full">
+      <section className="mt-4 overflow-visible px-6">
+        <div className="section-block--body relative overflow-scroll rounded">
+          <div className="inline-block min-w-full align-middle">
             <UsersList />
           </div>
         </div>

studio/components/interfaces/Auth/Users/UsersList.tsx

@@ -20,10 +20,10 @@ const UsersList = ({}) => {
           <>
             <Table.th>Email</Table.th>
             <Table.th>Phone</Table.th>
-            <Table.th className="hidden 2xl:table-cell">Provider</Table.th>
-            <Table.th className="hidden 2xl:table-cell">Created</Table.th>
-            <Table.th className="hidden xl:table-cell">Last Sign In</Table.th>
-            <Table.th className="hidden lg:table-cell">User UID</Table.th>
+            <Table.th className="table-cell">Provider</Table.th>
+            <Table.th className="table-cell">Created</Table.th>
+            <Table.th className="table-cell">Last Sign In</Table.th>
+            <Table.th className="table-cell">User UID</Table.th>
             <Table.th></Table.th>
           </>
         }
@@ -34,7 +34,7 @@ const UsersList = ({}) => {
                 {/* @ts-ignore */}
                 <Table.td
                   colSpan={7}
-                  className="h-14 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
+                  className="h-14 whitespace-nowrap border-t p-4 text-sm leading-5 text-gray-300"
                 >
                   <div className="flex items-center space-x-3 opacity-75">
                     <IconAlertCircle size={16} strokeWidth={2} />

studio/components/interfaces/Auth/Users/UsersListItem.tsx

@@ -19,24 +19,24 @@ const UserListItem: FC<Props> = ({ user, canRemoveUser }) => {
   const lastSignedIn = getDateFromIsoString(user.last_sign_in_at)
 
   return (
-    <Table.tr key={user.id}>
+    <Table.tr className="relative" key={user.id}>
       <Table.td className="whitespace-nowrap">
         <div className="flex items-center gap-2">
-          <span className="text-scale-1200">{!user.email ? '-' : user.email}</span>
+          <span className="text-sm text-scale-1200">{!user.email ? '-' : user.email}</span>
         </div>
       </Table.td>
       <Table.td className="whitespace-nowrap">
         <span className="text-scale-1200">{!user.phone ? '-' : user.phone}</span>
       </Table.td>
-      <Table.td className="hidden 2xl:table-cell">
-        <span className="text-scale-1200 capitalize">
+      <Table.td className="table-cell">
+        <span className="capitalize text-scale-1200">
           {user?.raw_app_meta_data?.provider || user?.app_metadata?.provider}
         </span>
       </Table.td>
-      <Table.td className="hidden 2xl:table-cell">
+      <Table.td className="table-cell">
         <span className="text-scale-1200">{createdAt?.format('DD MMM, YYYY HH:mm')}</span>
       </Table.td>
-      <Table.td className="hidden xl:table-cell">
+      <Table.td className="table-cell">
         {!isUserConfirmed ? (
           <Badge color="yellow">Waiting for verification..</Badge>
         ) : user.last_sign_in_at ? (
@@ -45,10 +45,13 @@ const UserListItem: FC<Props> = ({ user, canRemoveUser }) => {
           'Never'
         )}
       </Table.td>
-      <Table.td className="hidden lg:table-cell">
-        <SimpleCodeBlock metastring="" className="font-xs bash">
-          {user.id}
-        </SimpleCodeBlock>
+      <Table.td className="table-cell">
+        <div className="flex max-w-[72px] items-baseline">
+          <SimpleCodeBlock metastring="" className="font-xs bash">
+            {user.id}
+          </SimpleCodeBlock>
+          <div>...</div>
+        </div>
       </Table.td>
       <Table.td className="text-right">
         <UserDropdown user={user} canRemoveUser={canRemoveUser} />

studio/components/interfaces/Settings/Logs/LogTable.tsx

@@ -153,7 +153,7 @@ const LogTable = ({
   }, [stringData])
 
   const LogsExplorerTableHeader = () => (
-    <div className="w-full bg-scale-100 dark:bg-scale-300 rounded-tl rounded-tr border-t border-l border-r flex items-center justify-between px-5 py-2">
+    <div className="flex w-full items-center justify-between rounded-tl rounded-tr border-t border-l border-r bg-scale-100 px-5 py-2 dark:bg-scale-300">
       <div className="flex items-center gap-2">
         {data && data.length ? (
           <>
@@ -194,7 +194,7 @@ const LogTable = ({
     }
 
     return (
-      <div className="flex justify-center px-5 w-1/2">
+      <div className="flex w-1/2 justify-center px-5">
         <Alert variant="danger" title="Sorry! An error occured when fetching data." withIcon>
           <Renderer {...childProps} />
         </Alert>
@@ -203,11 +203,11 @@ const LogTable = ({
   }
 
   const renderNoResultAlert = () => (
-    <div className="flex flex-col items-center gap-6 text-center mt-16 opacity-100 scale-100 justify-center">
+    <div className="mt-16 flex scale-100 flex-col items-center justify-center gap-6 text-center opacity-100">
       <div className="flex flex-col gap-1">
-        <div className="relative border border-scale-600 border-dashed dark:border-scale-900 w-32 h-4 rounded px-2 flex items-center"></div>
-        <div className="relative border border-scale-600 border-dashed dark:border-scale-900 w-32 h-4 rounded px-2 flex items-center">
-          <div className="absolute right-1 -bottom-4">
+        <div className="relative flex h-4 w-32 items-center rounded border border-dashed border-scale-600 px-2 dark:border-scale-900"></div>
+        <div className="relative flex h-4 w-32 items-center rounded border border-dashed border-scale-600 px-2 dark:border-scale-900">
+          <div className="absolute right-1 -bottom-4 text-scale-1100">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-6 w-6"
@@ -235,16 +235,16 @@ const LogTable = ({
   return (
     <>
       <section
-        className={'flex flex-col w-full ' + (!queryType ? 'shadow-lg' : '')}
+        className={'flex w-full flex-col ' + (!queryType ? 'shadow-lg' : '')}
         style={{ maxHeight }}
       >
         {!queryType && <LogsExplorerTableHeader />}
-        <div className={`flex flex-row h-full ${!queryType ? 'border-l border-r' : ''}`}>
+        <div className={`flex h-full flex-row ${!queryType ? 'border-l border-r' : ''}`}>
           <DataGrid
             style={{ height: '100%' }}
             className={`
-            flex-grow flex-1
-            ${!queryType ? 'data-grid--logs-explorer' : ' data-grid--simple-logs'} 
+            flex-1 flex-grow
+            ${!queryType ? 'data-grid--logs-explorer' : ' data-grid--simple-logs'}
           `}
             rowHeight={40}
             headerRowHeight={queryType ? 0 : 28}
@@ -254,7 +254,7 @@ const LogTable = ({
             }}
             noRowsFallback={
               !isLoading ? (
-                <div className="transition-all duration-500 delay-200 py-4 flex w-full h-full justify-center items-center mx-auto space-y-12">
+                <div className="mx-auto flex h-full w-full items-center justify-center space-y-12 py-4 transition-all delay-200 duration-500">
                   {!error && renderNoResultAlert()}
                   {error && renderErrorAlert()}
                 </div>
@@ -276,10 +276,10 @@ const LogTable = ({
             <div
               className={
                 queryType
-                  ? 'w-1/2 flex flex-col'
+                  ? 'flex w-1/2 flex-col'
                   : focusedLog
-                  ? 'w-1/2 flex flex-col'
-                  : 'w-0 hidden'
+                  ? 'flex w-1/2 flex-col'
+                  : 'hidden w-0'
               }
             >
               <LogSelection