From 67364913e1edcfd0964e0f6a4cf25b95815a2ff9 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Mon, 19 Jan 2026 13:13:11 +0800
Subject: [PATCH 1/2] fix: replace nested button with div role="button" to fix
 hydration error

HTML spec doesn't allow <button> inside <button>. The delete button was
nested inside SidebarMenuButton causing React hydration errors. Changed
to <div role="button"> with keyboard support for accessibility.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/renderer/src/components/AppSidebar.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/AppSidebar.tsx b/src/renderer/src/components/AppSidebar.tsx
index a8952549aa..0ace7173da 100644
--- a/src/renderer/src/components/AppSidebar.tsx
+++ b/src/renderer/src/components/AppSidebar.tsx
@@ -109,20 +109,29 @@ function SessionItem({
               </span>
             </div>
 
-            {/* Delete button - always rendered, visibility via opacity */}
-            <button
+            {/* Delete button - using div with role="button" to avoid nested button hydration error */}
+            <div
+              role="button"
+              tabIndex={0}
               onClick={(e) => {
                 e.stopPropagation()
                 onDelete()
               }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  onDelete()
+                }
+              }}
               className={cn(
-                'shrink-0 self-start rounded p-1 transition-opacity duration-150',
+                'shrink-0 cursor-pointer self-start rounded p-1 transition-opacity duration-150',
                 'hover:bg-muted active:bg-muted',
                 isHovered ? 'opacity-50 hover:opacity-100' : 'opacity-0'
               )}
             >
               <Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
-            </button>
+            </div>
           </SidebarMenuButton>
         </TooltipTrigger>
         <TooltipContent>

From 9e0e27125ce497fef30b6acc99d4fc8d51e1e101 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Mon, 19 Jan 2026 13:15:55 +0800
Subject: [PATCH 2/2] style: adjust chat area padding for better alignment

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/renderer/src/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 30f0d38fe5..58588c02be 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -154,7 +154,7 @@ function AppContent(): React.JSX.Element {
           <div className="relative flex-1 overflow-hidden flex flex-col">
             {/* Chat scroll area - only messages */}
             <div ref={containerRef} onScroll={handleScroll} className="flex-1 overflow-y-auto px-4">
-              <div className="mx-auto max-w-3xl pb-12 px-2">
+              <div className="mx-auto max-w-3xl pb-12 px-6">
                 <ChatView
                   updates={sessionUpdates}
                   isProcessing={isProcessing}
@@ -169,10 +169,10 @@ function AppContent(): React.JSX.Element {
 
             {/* Input area - fixed at bottom, outside scroll */}
             <div>
-              <div className="relative mx-auto max-w-3xl">
+              <div className="relative mx-auto max-w-3xl px-4">
                 {/* Scroll to bottom button - above input, left-aligned */}
                 {!isAtBottom && currentSession && (
-                  <div className="absolute bottom-full left-0 pb-2 pointer-events-none">
+                  <div className="absolute bottom-full left-4 pb-2 pointer-events-none">
                     <button
                       onClick={handleScrollToBottom}
                       className={cn(