From 8d00fd0aba1ba3cea49a4eae98749ba56e1ad86f Mon Sep 17 00:00:00 2001
From: Kyle Rummens <58995471+kylerummens@users.noreply.github.com>
Date: Wed, 1 Jan 2025 21:52:25 -0700
Subject: [PATCH] fix(dashboard): Improve scrollbar position on Table Editor
 list (#32505)

* Improve padding on infinite table list when scrollbar is visible

* Add back removed bottom padding

---------

Co-authored-by: Kyle Rummens <kyle@prodatakey.com>
---
 .../TableEditorLayout/EntityListItem.tsx      | 368 +++++++++---------
 .../TableEditorLayout/TableEditorMenu.tsx     |   2 +-
 2 files changed, 186 insertions(+), 184 deletions(-)

diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 23ad874970b..02e617995be 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -267,196 +267,198 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
   }
 
   return (
-    <EditorTablePageLink
-      title={entity.name}
-      id={String(entity.id)}
-      href={`/project/${projectRef}/editor/${entity.id}?schema=${selectedSchema}`}
-      role="button"
-      aria-label={`View ${entity.name}`}
-      className={cn(
-        'w-full',
-        'flex items-center gap-2',
-        'py-1 px-2',
-        'text-light',
-        'rounded-md',
-        isActive ? 'bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
-        'group',
-        'transition'
-      )}
-    >
-      <Tooltip.Root delayDuration={0} disableHoverableContent={true}>
-        <Tooltip.Trigger className="min-w-4" asChild>
-          {entity.type === ENTITY_TYPE.TABLE ? (
-            <Table2
-              size={15}
-              strokeWidth={1.5}
-              className={cn(
-                'text-foreground-muted group-hover:text-foreground-lighter',
-                isActive && 'text-foreground-lighter',
-                'transition-colors'
-              )}
-            />
-          ) : entity.type === ENTITY_TYPE.VIEW ? (
-            <Eye
-              size={15}
-              strokeWidth={1.5}
-              className={cn(
-                'text-foreground-muted group-hover:text-foreground-lighter',
-                isActive && 'text-foreground-lighter',
-                'transition-colors'
-              )}
-            />
-          ) : (
-            <div
-              className={cn(
-                'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
-                entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
-                entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
-                entity.type === ENTITY_TYPE.PARTITIONED_TABLE &&
-                  'text-foreground-light bg-border-stronger'
-              )}
-            >
-              {Object.entries(ENTITY_TYPE)
-                .find(([, value]) => value === entity.type)?.[0]?.[0]
-                ?.toUpperCase()}
-            </div>
-          )}
-        </Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content
-            side="bottom"
-            className={[
-              'rounded bg-alternative py-1 px-2 leading-none shadow',
-              'border border-background',
-              'text-xs text-foreground capitalize',
-            ].join(' ')}
-          >
-            <Tooltip.Arrow className="radix-tooltip-arrow" />
-            {formatTooltipText(entity.type)}
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-      <div
+    <div className="px-2">
+      <EditorTablePageLink
+        title={entity.name}
+        id={String(entity.id)}
+        href={`/project/${projectRef}/editor/${entity.id}?schema=${selectedSchema}`}
+        role="button"
+        aria-label={`View ${entity.name}`}
         className={cn(
-          'truncate',
-          'overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
-          isActive && 'text-foreground'
+          'w-full',
+          'flex items-center gap-2',
+          'py-1 px-2',
+          'text-light',
+          'rounded-md',
+          isActive ? 'bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
+          'group',
+          'transition'
         )}
       >
-        <span
+        <Tooltip.Root delayDuration={0} disableHoverableContent={true}>
+          <Tooltip.Trigger className="min-w-4" asChild>
+            {entity.type === ENTITY_TYPE.TABLE ? (
+              <Table2
+                size={15}
+                strokeWidth={1.5}
+                className={cn(
+                  'text-foreground-muted group-hover:text-foreground-lighter',
+                  isActive && 'text-foreground-lighter',
+                  'transition-colors'
+                )}
+              />
+            ) : entity.type === ENTITY_TYPE.VIEW ? (
+              <Eye
+                size={15}
+                strokeWidth={1.5}
+                className={cn(
+                  'text-foreground-muted group-hover:text-foreground-lighter',
+                  isActive && 'text-foreground-lighter',
+                  'transition-colors'
+                )}
+              />
+            ) : (
+              <div
+                className={cn(
+                  'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
+                  entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
+                  entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
+                  entity.type === ENTITY_TYPE.PARTITIONED_TABLE &&
+                    'text-foreground-light bg-border-stronger'
+                )}
+              >
+                {Object.entries(ENTITY_TYPE)
+                  .find(([, value]) => value === entity.type)?.[0]?.[0]
+                  ?.toUpperCase()}
+              </div>
+            )}
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              side="bottom"
+              className={[
+                'rounded bg-alternative py-1 px-2 leading-none shadow',
+                'border border-background',
+                'text-xs text-foreground capitalize',
+              ].join(' ')}
+            >
+              <Tooltip.Arrow className="radix-tooltip-arrow" />
+              {formatTooltipText(entity.type)}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+        <div
           className={cn(
-            isActive ? 'text-foreground' : 'text-foreground-light group-hover:text-foreground',
-            'text-sm',
-            'transition',
-            'truncate'
+            'truncate',
+            'overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
+            isActive && 'text-foreground'
           )}
         >
-          {entity.name}
-        </span>
-        <EntityTooltipTrigger entity={entity} />
-      </div>
-
-      {canEdit && (
-        <DropdownMenu>
-          <DropdownMenuTrigger className="text-foreground-lighter transition-all hover:text-foreground data-[state=open]:text-foreground">
-            <MoreHorizontal size={14} strokeWidth={2} />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side="bottom" align="start" className="w-44">
-            <DropdownMenuItem
-              key="copy-name"
-              className="space-x-2"
-              onClick={(e) => {
-                e.stopPropagation()
-                copyToClipboard(entity.name)
-              }}
-            >
-              <Clipboard size={12} />
-              <span>Copy name</span>
-            </DropdownMenuItem>
-
-            {entity.type === ENTITY_TYPE.TABLE && (
-              <>
-                <DropdownMenuSeparator />
-
-                <DropdownMenuItem
-                  key="edit-table"
-                  className="space-x-2"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    snap.onEditTable()
-                  }}
-                >
-                  <Edit size={12} />
-                  <span>Edit table</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  key="duplicate-table"
-                  className="space-x-2"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    snap.onDuplicateTable()
-                  }}
-                >
-                  <Copy size={12} />
-                  <span>Duplicate table</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem key="view-policies" className="space-x-2" asChild>
-                  <Link
-                    key="view-policies"
-                    href={`/project/${projectRef}/auth/policies?schema=${selectedSchema}&search=${entity.id}`}
-                  >
-                    <Lock size={12} />
-                    <span>View policies</span>
-                  </Link>
-                </DropdownMenuItem>
-
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger className="gap-x-2">
-                    <Download size={12} />
-                    Export data
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem
-                      key="download-table-csv"
-                      className="space-x-2"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        exportTableAsCSV()
-                      }}
-                    >
-                      <span>Export table as CSV</span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      key="download-table-sql"
-                      className="gap-x-2"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        exportTableAsSQL()
-                      }}
-                    >
-                      <span>Export table as SQL</span>
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  key="delete-table"
-                  className="gap-x-2"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    snap.onDeleteTable()
-                  }}
-                >
-                  <Trash size={12} />
-                  <span>Delete table</span>
-                </DropdownMenuItem>
-              </>
+          <span
+            className={cn(
+              isActive ? 'text-foreground' : 'text-foreground-light group-hover:text-foreground',
+              'text-sm',
+              'transition',
+              'truncate'
             )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </EditorTablePageLink>
+          >
+            {entity.name}
+          </span>
+          <EntityTooltipTrigger entity={entity} />
+        </div>
+
+        {canEdit && (
+          <DropdownMenu>
+            <DropdownMenuTrigger className="text-foreground-lighter transition-all hover:text-foreground data-[state=open]:text-foreground">
+              <MoreHorizontal size={14} strokeWidth={2} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="bottom" align="start" className="w-44">
+              <DropdownMenuItem
+                key="copy-name"
+                className="space-x-2"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  copyToClipboard(entity.name)
+                }}
+              >
+                <Clipboard size={12} />
+                <span>Copy name</span>
+              </DropdownMenuItem>
+
+              {entity.type === ENTITY_TYPE.TABLE && (
+                <>
+                  <DropdownMenuSeparator />
+
+                  <DropdownMenuItem
+                    key="edit-table"
+                    className="space-x-2"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      snap.onEditTable()
+                    }}
+                  >
+                    <Edit size={12} />
+                    <span>Edit table</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    key="duplicate-table"
+                    className="space-x-2"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      snap.onDuplicateTable()
+                    }}
+                  >
+                    <Copy size={12} />
+                    <span>Duplicate table</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem key="view-policies" className="space-x-2" asChild>
+                    <Link
+                      key="view-policies"
+                      href={`/project/${projectRef}/auth/policies?schema=${selectedSchema}&search=${entity.id}`}
+                    >
+                      <Lock size={12} />
+                      <span>View policies</span>
+                    </Link>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger className="gap-x-2">
+                      <Download size={12} />
+                      Export data
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem
+                        key="download-table-csv"
+                        className="space-x-2"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          exportTableAsCSV()
+                        }}
+                      >
+                        <span>Export table as CSV</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        key="download-table-sql"
+                        className="gap-x-2"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          exportTableAsSQL()
+                        }}
+                      >
+                        <span>Export table as SQL</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    key="delete-table"
+                    className="gap-x-2"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      snap.onDeleteTable()
+                    }}
+                  >
+                    <Trash size={12} />
+                    <span>Delete table</span>
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </EditorTablePageLink>
+    </div>
   )
 }
 
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index c233915a21e..22d28e67044 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -269,7 +269,7 @@ const TableEditorMenu = () => {
                 />
               )}
               {(entityTypes?.length ?? 0) > 0 && (
-                <div className="flex flex-1" data-testid="tables-list">
+                <div className="flex flex-1 -mx-2" data-testid="tables-list">
                   <InfiniteList
                     items={entityTypes}
                     ItemComponent={EntityListItem}