style(sql): drop redundant inline styles in favour of classes [UX-1259]

Remove three style={{ borderColor: 'var(--color-border)' }} props that just
re-asserted the base-layer default (* { border-color: var(--color-border) }),
and move the two static bridge-timeline widths to w-full/w-[74%]/w-[26%]
utility classes.

Author: c-julin

frontend/src/components/pages/sql/sql-editor.tsx

@@ -373,10 +373,7 @@ export const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(function Sq
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-background">
-      <div
-        className="flex shrink-0 items-center gap-2 border-b pr-[10px]"
-        style={{ borderColor: 'var(--color-border)' }}
-      >
+      <div className="flex shrink-0 items-center gap-2 border-b pr-[10px]">
         <div className="flex min-w-0 flex-1 items-stretch overflow-x-auto">
           {tabs.map((t) => (
             <div

frontend/src/components/pages/sql/sql-results.tsx

@@ -124,9 +124,8 @@ function BridgeTimeline({ bridge }: { bridge: BridgeInfo }) {
         <div
           className={cn(
             'flex min-w-0 items-center border border-info border-r-0 bg-info-subtle px-[11px]',
-            caught ? 'rounded-md border-r' : 'rounded-l-md'
+            caught ? 'w-full rounded-md border-r' : 'w-[74%] rounded-l-md'
           )}
-          style={{ width: caught ? '100%' : '74%' }}
         />
         {!caught && (
           <>
@@ -137,8 +136,7 @@ function BridgeTimeline({ bridge }: { bridge: BridgeInfo }) {
             </div>
             {/* .res-bridge-tl-live: live-tail segment with the 45deg hatch overlay. */}
             <div
-              className="relative overflow-hidden rounded-r-md border border-success border-l-0 bg-background-success-subtle after:absolute after:inset-0 after:content-[''] after:[background:repeating-linear-gradient(45deg,transparent,transparent_5px,var(--color-success-subtle)_5px,var(--color-success-subtle)_10px)]"
-              style={{ width: '26%' }}
+              className="relative w-[26%] overflow-hidden rounded-r-md border border-success border-l-0 bg-background-success-subtle after:absolute after:inset-0 after:content-[''] after:[background:repeating-linear-gradient(45deg,transparent,transparent_5px,var(--color-success-subtle)_5px,var(--color-success-subtle)_10px)]"
             />
           </>
         )}

frontend/src/components/pages/sql/sql-workspace.tsx

@@ -389,10 +389,7 @@ export function SqlWorkspace({ role = 'viewer' }: SqlWorkspaceProps) {
       className="flex h-full flex-col bg-background text-strong dark:[--color-border-strong:var(--color-grey-800)] dark:[--color-border-subtle:var(--color-grey-600)] dark:[--color-border:var(--color-grey-700)]"
       ref={rootRef}
     >
-      <div
-        className="flex h-[52px] shrink-0 items-center gap-3 border-b bg-background px-6"
-        style={{ borderColor: 'var(--color-border)' }}
-      >
+      <div className="flex h-[52px] shrink-0 items-center gap-3 border-b bg-background px-6">
         <div className="flex items-center gap-2 font-semibold text-sm text-strong tracking-heading [&_svg]:text-action-primary">
           <Database size={16} /> Redpanda SQL <span className="font-medium text-muted-foreground">· Studio</span>
         </div>
@@ -404,10 +401,7 @@ export function SqlWorkspace({ role = 'viewer' }: SqlWorkspaceProps) {
       </div>
 
       <div className="flex min-h-0 flex-1">
-        <div
-          className="flex min-h-0 w-[320px] shrink-0 flex-col border-r bg-background"
-          style={{ borderColor: 'var(--color-border)' }}
-        >
+        <div className="flex min-h-0 w-[320px] shrink-0 flex-col border-r bg-background">
           <CatalogTree
             catalogs={catalogs}
             isLoading={isLoading}