Fix BucketRow long name hides more button (#39014)

apps/studio/components/interfaces/Storage/BucketRow.tsx

@@ -44,13 +44,14 @@ export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: Bucke
       {/* Even though we trim whitespaces from bucket names, there may be some existing buckets with trailing whitespaces. */}
       <Link
         href={`/project/${projectRef}/storage/buckets/${encodeURIComponent(bucket.id)}`}
-        className={'py-1 px-3 grow'}
+        className="py-1 pl-3 pr-1 flex-grow min-w-0"
       >
         <div className="flex items-center justify-between space-x-2 truncate w-full">
           <p
-            className={`text-sm group-hover:text-foreground transition truncate ${
+            className={cn(
+              'text-sm group-hover:text-foreground transition truncate',
               isSelected ? 'text-foreground' : 'text-foreground-light'
-            }`}
+            )}
             title={bucket.name}
           >
             {bucket.name}
@@ -106,7 +107,7 @@ export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: Bucke
           </DropdownMenuContent>
         </DropdownMenu>
       ) : (
-        <div className="w-7 mr-1" />
+        <div className="min-w-6 mr-1" />
       )}
 
       <EditBucketModal visible={modal === `edit`} bucket={bucket} onClose={onClose} />