refactor(platform): provider drawer — headers outside Card, ghost buttons, collapsible options guide

services/platform/app/components/ui/data-display/collapsible-guide.tsx

@@ -34,7 +34,7 @@ export function CollapsibleGuide({
       <div
         className={cn(
           markdownWrapperStyles,
-          'max-w-none border-t border-border px-3 py-2 text-xs leading-relaxed',
+          'border-border max-w-none border-t px-3 py-2 text-xs leading-relaxed',
         )}
       >
         <ReactMarkdown
@@ -50,6 +50,17 @@ export function CollapsibleGuide({
                 {children}
               </a>
             ),
+            pre: ({ node: _node, className, children, ...rest }) => (
+              <pre
+                {...rest}
+                className={cn(
+                  'bg-muted/60 border-border my-2 overflow-x-auto rounded-md border p-3 font-mono text-[11px] leading-relaxed',
+                  className,
+                )}
+              >
+                {children}
+              </pre>
+            ),
           }}
         >
           {content}

services/platform/app/components/ui/layout/card.tsx

@@ -29,7 +29,7 @@ export function Card({
   return (
     <div
       className={cn(
-        'rounded-xl border bg-card text-card-foreground shadow-sm',
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
         className,
       )}
     >

services/platform/app/components/ui/navigation/tabs.tsx

@@ -30,7 +30,7 @@ interface TabsProps {
 }
 
 const listVariants = cva(
-  'scrollbar-hide inline-flex items-center overflow-x-auto text-muted-foreground',
+  'scrollbar-hide inline-flex items-center overflow-x-auto text-muted-foreground min-w-full justify-around',
   {
     variants: {
       variant: {

services/platform/app/features/settings/providers/components/provider-add-panel.tsx

@@ -616,14 +616,14 @@ export function ProviderAddPanel({
             {/* ── Models section ─────────────────────────────── */}
             <Stack gap={3}>
               <HStack justify="between" align="center">
-                <Text className="text-sm font-medium">
+                <Text className="text-[15px] font-semibold tracking-[-0.01em]">
                   {t('providers.models')}
                 </Text>
-                <HStack gap={2} align="center">
+                <HStack gap={1} align="center">
                   {canFetch && (
                     <Button
                       type="button"
-                      variant="secondary"
+                      variant="ghost"
                       size="sm"
                       onClick={() => void handleFetchModels()}
                       disabled={isFetching}
@@ -638,7 +638,7 @@ export function ProviderAddPanel({
                   )}
                   <Button
                     type="button"
-                    variant="secondary"
+                    variant="ghost"
                     size="sm"
                     onClick={openAddDialog}
                   >
@@ -670,7 +670,7 @@ export function ProviderAddPanel({
 
               {isFetching && rows.length === 0 && (
                 <div
-                  className="border-border flex items-center justify-center gap-2 rounded-lg border px-4 py-8"
+                  className="border-border flex items-center justify-center gap-2 rounded-xl border px-4 py-8"
                   role="status"
                   aria-live="polite"
                 >
@@ -682,8 +682,8 @@ export function ProviderAddPanel({
               )}
 
               {rows.length > 0 && (
-                <div className="overflow-hidden rounded-lg border">
-                  <div className="border-border border-b px-3 py-2">
+                <div className="overflow-hidden rounded-xl border">
+                  <div className="border-border border-b px-3 py-2.5">
                     <SearchInput
                       value={modelSearch}
                       onChange={(e) => setModelSearch(e.target.value)}