From 97df71ff576e43c88cd1d44613eef259e448d602 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 03:57:19 +0000
Subject: [PATCH] SessionPanel: wrap signed-in identity in the same card
 treatment as the rest

The identity row used to sit between the theme card and the my-repo /
account / sign-out cards with no surrounding card, an undersized 22px
avatar, a different horizontal padding, and a bottom-border separator
that doubled up against the nav-link card border below it. Result was
the user info reading as floating debris between two tidy stacks.

Give it the same background / border / spacing as the compact-nav-link
rows around it so the whole signed-in section reads as one coherent
stack. Bump the avatar to 32px (vs 16px row icons) so the user's
identity has a touch more presence without breaking alignment.
---
 src/components/SessionPanel.tsx | 37 ++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/SessionPanel.tsx b/src/components/SessionPanel.tsx
index 593f7b8..4471f58 100644
--- a/src/components/SessionPanel.tsx
+++ b/src/components/SessionPanel.tsx
@@ -60,14 +60,20 @@ export default function SessionPanel({ onNavigate }: Props) {
 
   return (
     <>
+      {/* Identity card. Uses the same border / background / padding as the
+          compact-nav-link rows that follow so the section reads as a
+          coherent stack instead of an un-styled header floating above a
+          list of action cards. The avatar is sized slightly larger than
+          the row icons (32 vs 16) to give the user's identity some
+          presence without breaking horizontal alignment. */}
       <div
         style={{
           display: 'flex',
           alignItems: 'center',
-          gap: '0.625rem',
-          padding: '0.625rem 1rem',
-          marginBottom: '0.25rem',
-          borderBottom: '1px solid var(--border-subtle)',
+          gap: '0.75rem',
+          padding: '0.625rem 0.75rem',
+          background: 'var(--bg-tertiary)',
+          border: '1px solid var(--border-subtle)',
         }}
       >
         {avatar ? (
@@ -75,36 +81,36 @@ export default function SessionPanel({ onNavigate }: Props) {
           <img
             src={avatar}
             alt=""
-            width={22}
-            height={22}
+            width={32}
+            height={32}
             style={{
-              width: 22,
-              height: 22,
+              width: 32,
+              height: 32,
               objectFit: 'cover',
               flexShrink: 0,
-              background: 'var(--bg-tertiary)',
+              background: 'var(--bg-secondary)',
             }}
           />
         ) : (
           <span
             style={{
-              width: 22,
-              height: 22,
+              width: 32,
+              height: 32,
               display: 'inline-flex',
               alignItems: 'center',
               justifyContent: 'center',
-              background: 'var(--bg-tertiary)',
+              background: 'var(--bg-secondary)',
               color: 'var(--text-tertiary)',
               flexShrink: 0,
             }}
           >
-            <User size={12} />
+            <User size={16} />
           </span>
         )}
-        <div style={{ minWidth: 0, lineHeight: 1.2 }}>
+        <div style={{ minWidth: 0, lineHeight: 1.25, flex: 1 }}>
           <div
             style={{
-              fontSize: '0.8125rem',
+              fontSize: '0.875rem',
               color: 'var(--text-primary)',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
@@ -116,6 +122,7 @@ export default function SessionPanel({ onNavigate }: Props) {
           {handle && (
             <div
               style={{
+                marginTop: '0.125rem',
                 fontSize: '0.7rem',
                 color: 'var(--text-tertiary)',
                 fontFamily: 'var(--font-mono)',
-- 
2.51.2