feat(api-profile-ux): implement tabbed profile editor and fix disclaimer visibility

Author: kaitranntt

ui/src/App.tsx

@@ -43,16 +43,18 @@ function Layout() {
   return (
     <SidebarProvider>
       <AppSidebar />
-      <main className="flex-1 overflow-auto">
-        <header className="flex h-12 items-center justify-end px-4 border-b">
+      <main className="flex-1 flex flex-col min-h-0 overflow-hidden">
+        <header className="flex h-12 items-center justify-end px-4 border-b shrink-0">
           <div className="flex items-center gap-4">
             <ConnectionIndicator />
             <ThemeToggle />
           </div>
         </header>
-        <Suspense fallback={<PageLoader />}>
-          <Outlet />
-        </Suspense>
+        <div className="flex-1 overflow-auto pb-12">
+          <Suspense fallback={<PageLoader />}>
+            <Outlet />
+          </Suspense>
+        </div>
         <LocalhostDisclaimer />
       </main>
     </SidebarProvider>

ui/src/components/localhost-disclaimer.tsx

@@ -1,30 +1,13 @@
 import { Shield, X } from 'lucide-react';
 import { useState } from 'react';
-import { useSidebar } from '@/hooks/use-sidebar';
 
 export function LocalhostDisclaimer() {
   const [dismissed, setDismissed] = useState(false);
-  const { state, isMobile } = useSidebar();
 
   if (dismissed) return null;
 
-  // Calculate the left margin based on sidebar state
-  // When expanded: sidebar width is 16rem
-  // When collapsed: sidebar width is 3rem
-  // On mobile: sidebar is overlay, no margin needed
-  const getLeftMargin = () => {
-    if (isMobile) return '0';
-    return state === 'expanded' ? '16rem' : '3rem';
-  };
-
   return (
-    <div
-      className="fixed bottom-0 bg-yellow-50 dark:bg-yellow-900/20 border-t border-yellow-200 dark:border-yellow-800 px-4 py-2 transition-all duration-200 ease-linear z-50"
-      style={{
-        left: getLeftMargin(),
-        right: '0',
-      }}
-    >
+    <div className="fixed bottom-0 left-0 right-0 bg-yellow-50 dark:bg-yellow-900/20 border-t border-yellow-200 dark:border-yellow-800 px-4 py-2 z-50 md:pl-[var(--sidebar-width)] transition-[padding] duration-200">
       <div className="flex items-center justify-center gap-4">
         <div className="flex items-center gap-2 text-sm text-yellow-800 dark:text-yellow-200">
           <Shield className="w-4 h-4 flex-shrink-0" />