feat: clean up content area

apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityCardBody.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { cn } from 'ui'
+import { Badge } from 'ui'
 
 import { EndpointRow } from './EndpointRow'
 import { MAX_VISIBLE_ENDPOINT_ROWS } from './TokenCapabilities.constants'
@@ -11,18 +11,14 @@ interface CapabilityCardBodyProps {
   mcpTools: string[]
 }
 
-/**
- * One bordered container holding two labelled, independently-tabled groups — endpoints and MCP
- * tools — rather than a single table with interleaved header rows, per the two-table a11y pattern.
- */
 export const CapabilityCardBody = ({ endpoints, mcpTools }: CapabilityCardBodyProps) => {
   const [showAllEndpoints, setShowAllEndpoints] = useState(false)
 
   if (endpoints.length === 0 && mcpTools.length === 0) {
     return (
-      <div className="rounded-md border px-3 py-4 text-center text-xs text-foreground-lighter">
-        No Management API endpoints or MCP tools are enabled by this capability yet.
-      </div>
+      <p className="text-xs text-foreground-lighter">
+        No API endpoints or MCP tools are enabled by this capability yet.
+      </p>
     )
   }
 
@@ -35,34 +31,29 @@ export const CapabilityCardBody = ({ endpoints, mcpTools }: CapabilityCardBodyPr
   const hiddenEndpointCount = endpoints.length - visibleEndpoints.length
 
   return (
-    <div className="overflow-hidden rounded-md border">
+    <div className="flex flex-col gap-4">
       {endpoints.length > 0 && (
-        <div>
-          <div className="flex items-center justify-between border-b bg-surface-200 px-3 py-1.5">
-            <span className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
-              Management API endpoints
-            </span>
-            <span className="text-[11px] text-foreground-lighter">{endpoints.length}</span>
+        <div className="flex flex-col gap-1.5">
+          <p className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
+            API endpoints
+          </p>
+          <div className="divide-y">
+            {visibleEndpoints.map((endpoint) => (
+              <EndpointRow
+                key={endpoint.raw}
+                method={endpoint.method}
+                path={endpoint.path}
+                sharedPrefix={sharedPrefix}
+                methodColumnWidth={methodColumnWidth}
+              />
+            ))}
           </div>
-          <table className="w-full" aria-label="Management API endpoints">
-            <tbody className="divide-y">
-              {visibleEndpoints.map((endpoint) => (
-                <EndpointRow
-                  key={endpoint.raw}
-                  method={endpoint.method}
-                  path={endpoint.path}
-                  sharedPrefix={sharedPrefix}
-                  methodColumnWidth={methodColumnWidth}
-                />
-              ))}
-            </tbody>
-          </table>
           {hiddenEndpointCount > 0 && (
             <button
               type="button"
               tabIndex={0}
               onClick={() => setShowAllEndpoints(true)}
-              className="w-full border-t px-3 py-1.5 text-left text-xs text-foreground-light hover:text-foreground"
+              className="self-start text-xs text-foreground-light hover:text-foreground"
             >
               Show all {endpoints.length}
             </button>
@@ -70,28 +61,17 @@ export const CapabilityCardBody = ({ endpoints, mcpTools }: CapabilityCardBodyPr
         </div>
       )}
       {mcpTools.length > 0 && (
-        <div className={cn(endpoints.length > 0 && 'border-t border-strong')}>
-          <div className="flex items-center justify-between border-b bg-surface-200 px-3 py-1.5">
-            <span className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
-              MCP tools
-            </span>
-            <span className="text-[11px] text-foreground-lighter">{mcpTools.length}</span>
+        <div className="flex flex-col gap-1.5">
+          <p className="text-[11px] font-mono uppercase tracking-wide text-foreground-lighter">
+            MCP tools
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {mcpTools.map((tool) => (
+              <Badge key={tool} variant="default">
+                {tool}
+              </Badge>
+            ))}
           </div>
-          <table className="w-full" aria-label="MCP tools">
-            <tbody className="divide-y">
-              {mcpTools.map((tool) => (
-                <tr key={tool}>
-                  <td className="w-1/3 px-3 py-1.5 align-top font-mono text-xs text-foreground">
-                    {tool}
-                  </td>
-                  {/* No description field exists yet for MCP tools — stubbed rather than fabricated. */}
-                  <td className="px-3 py-1.5 text-xs text-foreground-lighter">
-                    No description available
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
         </div>
       )}
     </div>

apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx

@@ -26,22 +26,20 @@ export const EndpointRow = ({
   const isMutating = method !== 'GET'
 
   return (
-    <tr>
-      <td className="px-3 py-1.5 align-top" style={{ width: methodColumnWidth }}>
+    <div className="flex items-center gap-2 py-1.5" title={path}>
+      <span className="shrink-0" style={{ width: methodColumnWidth }}>
         {isMutating ? (
           <Badge variant="warning">{method}</Badge>
         ) : (
           <span className="font-mono text-xs text-foreground-lighter">{method}</span>
         )}
-      </td>
-      <td className="min-w-0 px-3 py-1.5" title={path}>
-        <div className="flex min-w-0 overflow-hidden whitespace-nowrap font-mono text-xs">
-          {prefix !== '' && (
-            <span className="overflow-hidden text-ellipsis text-foreground-lighter">{prefix}</span>
-          )}
-          <span className="shrink-0 text-foreground">{distinguishing}</span>
-        </div>
-      </td>
-    </tr>
+      </span>
+      <span className="flex min-w-0 overflow-hidden whitespace-nowrap font-mono text-xs">
+        {prefix !== '' && (
+          <span className="overflow-hidden text-ellipsis text-foreground-lighter">{prefix}</span>
+        )}
+        <span className="shrink-0 text-foreground">{distinguishing}</span>
+      </span>
+    </div>
   )
 }

apps/studio/components/interfaces/Account/AccessTokens/Scoped/ViewTokenSheet.test.tsx

@@ -185,8 +185,6 @@ describe('ViewTokenSheet', () => {
 
     expect(screen.getByText('get_advisors')).toBeInTheDocument()
     expect(screen.getByText('execute_sql')).toBeInTheDocument()
-    // MCP tools have no description field yet — stubbed visibly rather than fabricated.
-    expect(screen.getAllByText('No description available').length).toBe(2)
 
     // project:database is catalog-high risk and granted read-write — max() over capabilities.
     expect(screen.getByText('High risk')).toBeInTheDocument()