From 5986fecc89d851c6ede2106841fa2ce5595529bc Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Tue, 4 Aug 2026 16:01:14 -0400
Subject: [PATCH] fix(studio): use table + card component in log retention
 upgrade prompt (#48713)

## Summary
- Refactor the SQL Editor / Logs "Log retention" upgrade-prompt dialog
to use the design system's `Card` + `Table` components instead of a
custom flexbox-div table, matching the pattern in
`apps/design-system/registry/default/example/table-demo.tsx`
- No behavior or data change

Fixes FE-4034

Non-blocking review nit from #48452 (comment:
https://github.com/supabase/supabase/pull/48452#issuecomment-5128918096)

## Test plan
- [x] `pnpm --filter studio typecheck` passes
- [x] `pnpm --filter studio run lint:ratchet` passes (no new warnings)
- [x] Prettier check passes

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated the upgrade prompt with a more consistent card and table
layout.
  * Preserved existing plan names and log retention details.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Settings/Logs/UpgradePrompt.tsx           | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
index fededa3cd64..7d717067421 100644
--- a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import {
   Button,
+  Card,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -8,6 +9,12 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from 'ui'
 
 import { TIER_QUERY_LIMITS } from './Logs.constants'
@@ -47,30 +54,34 @@ const UpgradePrompt: React.FC<Props> = ({
         <DialogSection>
           <div className="space-y-4">
             <p className="text-sm">{description}</p>
-            <div className="border-control bg-surface-300 rounded-sm border">
-              <div className="flex items-center px-4 pt-2 pb-1">
-                <p className="text-foreground-light w-[40%] text-sm">Plan</p>
-                <p className="text-foreground-light w-[60%] text-sm">Retention duration</p>
-              </div>
-              <div className="py-1">
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Free</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.FREE.text}</p>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Pro</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.PRO.text}</p>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Team</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.TEAM.text}</p>
-                </div>
-                <div className="flex items-center px-4 py-1">
-                  <p className="w-[40%] text-sm">Enterprise</p>
-                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.ENTERPRISE.text}</p>
-                </div>
-              </div>
-            </div>
+            <Card>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Plan</TableHead>
+                    <TableHead>Retention duration</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>Free</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.FREE.text}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Pro</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.PRO.text}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Team</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.TEAM.text}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>Enterprise</TableCell>
+                    <TableCell>{TIER_QUERY_LIMITS.ENTERPRISE.text}</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </Card>
           </div>
         </DialogSection>
         <DialogFooter className="flex justify-end gap-3">