fix: match layout to Databricks workspace design

Content panel is now a floating white card with rounded corners (8px),
subtle border and shadow over a seamless #F7F7F7 background shared by
header and sidebar. Removes hard separator lines.

Closes #9

Co-authored-by: Isaac

Author: Rampim

frontend/src/App.jsx

@@ -12,7 +12,7 @@ import DebugPage from './components/debug/DebugPage'
 function TopBar({ onToggleSidebar }) {
   const navigate = useNavigate()
   return (
-    <header className="h-[48px] min-h-[48px] w-full bg-[#F7F7F7] border-b border-[#EBEBEB] flex items-center justify-between px-3">
+    <header className="h-[48px] min-h-[48px] w-full bg-[#F7F7F7] flex items-center justify-between px-3">
       <div className="flex items-center gap-1.5">
         <button
           onClick={onToggleSidebar}
@@ -39,26 +39,28 @@ function App() {
   const [sidebarOpen, setSidebarOpen] = useState(true)
 
   return (
-    <div className="flex flex-col h-screen bg-white">
+    <div className="flex flex-col h-screen bg-[#F7F7F7]">
       <TopBar onToggleSidebar={() => setSidebarOpen(v => !v)} />
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex flex-1 min-h-0">
         <div
           className="flex-shrink-0 overflow-hidden transition-all duration-200"
           style={{ width: sidebarOpen ? 200 : 0 }}
         >
           <Sidebar />
         </div>
-        <main className="flex-1 overflow-auto">
-          <Routes>
-            <Route path="/" element={<GatewayListPage />} />
-            <Route path="/gateways/:id" element={<GatewayDetailPage />} />
-            <Route path="/playground" element={<PlaygroundPage />} />
-            <Route path="/playground/:id" element={<PlaygroundPage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="/api-reference" element={<ApiReferencePage />} />
-            <Route path="/debug" element={<DebugPage />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
+        <main className="flex-1 overflow-hidden rounded-lg bg-white border border-[#EBEBEB] mb-1 mr-1" style={{ boxShadow: 'rgba(0,0,0,0.05) 0px 2px 3px -1px, rgba(0,0,0,0.02) 0px 1px 0px 0px' }}>
+          <div className="h-full overflow-auto">
+            <Routes>
+              <Route path="/" element={<GatewayListPage />} />
+              <Route path="/gateways/:id" element={<GatewayDetailPage />} />
+              <Route path="/playground" element={<PlaygroundPage />} />
+              <Route path="/playground/:id" element={<PlaygroundPage />} />
+              <Route path="/settings" element={<SettingsPage />} />
+              <Route path="/api-reference" element={<ApiReferencePage />} />
+              <Route path="/debug" element={<DebugPage />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </div>
         </main>
       </div>
     </div>

frontend/src/components/layout/Sidebar.jsx

@@ -36,7 +36,7 @@ function NavItem({ to, icon: Icon, label, end }) {
 
 export default function Sidebar() {
   return (
-    <aside className="w-[200px] bg-[#F7F7F7] border-r border-[#EBEBEB] flex flex-col p-2 h-full">
+    <aside className="w-[200px] bg-[#F7F7F7] flex flex-col p-2 h-full">
       <nav className="flex flex-col gap-0.5 flex-1">
         {mainNavItems.map((item) => (
           <NavItem key={item.to} {...item} />