From 112cc89c3dda441afef414777fde41b41576b555 Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Thu, 21 Aug 2025 16:02:45 +0100
Subject: [PATCH] fix(studio): column sizes for access tokens (#38096)

* fix: column sizes for access tokens

This fixes the column widths for the access tokens table so they dont collapse despite small strings for dates.

* fix: truncation for token name
---
 .../Account/AccessTokens/AccessTokenList.tsx      | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
index 73db62030f..cb0ad93a87 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
@@ -50,6 +50,7 @@ const RowLoading = () => (
 )
 
 const tableHeaderClass = 'text-left font-mono uppercase text-xs text-foreground-lighter h-auto py-2'
+
 const TableContainer = ({ children }: { children: React.ReactNode }) => (
   <Card className="w-full overflow-hidden">
     <CardContent className="p-0">
@@ -151,13 +152,15 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
         {filteredTokens?.map((x) => {
           return (
             <TableRow key={x.token_alias}>
-              <TableCell className="w-48">
-                <p className="truncate">{x.name}</p>
+              <TableCell className="w-36 max-w-36">
+                <p className="truncate" title={x.name}>
+                  {x.name}
+                </p>
               </TableCell>
-              <TableCell>
-                <span className="font-mono text-foreground-light">{x.token_alias}</span>
+              <TableCell className="max-w-96">
+                <p className="font-mono text-foreground-light truncate">{x.token_alias}</p>
               </TableCell>
-              <TableCell>
+              <TableCell className="min-w-32">
                 <p className="text-foreground-light">
                   {x.last_used_at ? (
                     <Tooltip>
@@ -171,7 +174,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                   )}
                 </p>
               </TableCell>
-              <TableCell>
+              <TableCell className="min-w-32">
                 {x.expires_at ? (
                   dayjs(x.expires_at).isBefore(dayjs()) ? (
                     <Tooltip>