Merge pull request #64 from multica-ai/fix/nested-button-hydration-error

Fix/nested button hydration error

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(

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>