From 8a0ed8a6be86eab28b63e9313a23a5a9f4622d19 Mon Sep 17 00:00:00 2001
From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com>
Date: Thu, 30 Apr 2026 19:31:25 +0530
Subject: [PATCH] fix(ui): consistent sidebar layout across all views (#1048)

---
 app/src/components/accounts/WebviewHost.tsx | 13 ++++++++-----
 app/src/pages/Accounts.tsx                  | 18 ++++++------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/app/src/components/accounts/WebviewHost.tsx b/app/src/components/accounts/WebviewHost.tsx
index 909b423d2..12ecf9ea1 100644
--- a/app/src/components/accounts/WebviewHost.tsx
+++ b/app/src/components/accounts/WebviewHost.tsx
@@ -64,11 +64,14 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
     const measureAndSync = () => {
       if (!el || cancelled) return;
       const rect = el.getBoundingClientRect();
+      // Inset the native webview by the container's border-radius so the
+      // rounded HTML border is visible around the edges.
+      const inset = 8;
       const bounds = {
-        x: Math.round(rect.left),
-        y: Math.round(rect.top),
-        width: Math.max(1, Math.round(rect.width)),
-        height: Math.max(1, Math.round(rect.height)),
+        x: Math.round(rect.left + inset),
+        y: Math.round(rect.top + inset),
+        width: Math.max(1, Math.round(rect.width - inset * 2)),
+        height: Math.max(1, Math.round(rect.height - inset * 2)),
       };
       const last = lastBoundsRef.current;
       const unchanged =
@@ -120,7 +123,7 @@ const WebviewHost = ({ accountId, provider }: WebviewHostProps) => {
   return (
     <div
       ref={ref}
-      className="relative h-full w-full overflow-hidden rounded-lg border border-stone-200 bg-stone-100"
+      className="relative h-full w-full overflow-hidden rounded-2xl border border-stone-200/70 bg-stone-100 shadow-soft"
       aria-label={`webview host for account ${accountId}`}>
       {isLoading ? (
         <div
diff --git a/app/src/pages/Accounts.tsx b/app/src/pages/Accounts.tsx
index 9bfa567db..e7579d1fe 100644
--- a/app/src/pages/Accounts.tsx
+++ b/app/src/pages/Accounts.tsx
@@ -195,18 +195,12 @@ const Accounts = () => {
   }, [ctxMenu]);
 
   return (
-    <div className="relative flex h-full overflow-hidden">
-      {/* Narrow icon rail — floats when Agent is selected, flush to the
-          edge when an app webview is taking the full pane. Hidden during
-          welcome lockdown (#883) so the user cannot navigate to a
-          connected account or add a new one. */}
+    <div className="relative flex h-full gap-3 overflow-hidden">
+      {/* Narrow icon rail — always rendered as a floating card alongside
+          the main content pane. Hidden during welcome lockdown (#883) so
+          the user cannot navigate to a connected account or add a new one. */}
       {!welcomeLocked && (
-        <aside
-          className={`z-30 flex w-16 flex-none flex-col items-center gap-2 bg-white/60 py-3 backdrop-blur-md transition-all duration-300 ${
-            isAgentSelected
-              ? 'my-3 ml-3 rounded-2xl border border-stone-200/70 shadow-soft'
-              : 'border-r border-stone-200/60'
-          }`}>
+        <aside className="z-30 flex w-16 flex-none flex-col items-center gap-2 bg-white/60 py-3 backdrop-blur-md my-3 ml-3 rounded-2xl border border-stone-200/70 shadow-soft">
           <RailButton active={isAgentSelected} onClick={selectAgent} tooltip="Agent">
             <AgentIcon className="h-9 w-9 rounded-lg" />
           </RailButton>
@@ -262,7 +256,7 @@ const Accounts = () => {
             /> */}
           </div>
         ) : active ? (
-          <div className="flex-1">
+          <div className="flex-1 py-3 pr-3">
             <WebviewHost accountId={active.id} provider={active.provider} />
           </div>
         ) : (