From 47852df9d7f16487f8a96a11e0258851e12b2f06 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 28 Oct 2025 21:42:39 +0000
Subject: [PATCH] fix: ensure full width highlighting for list items in
 sessions and folders

---
 src/components/folder-selection-view.tsx | 18 +++++++++---------
 src/components/instance-welcome-view.tsx | 13 +++++++------
 src/components/session-picker.tsx        |  4 ++--
 src/styles/components.css                | 24 ++++++++++++------------
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/folder-selection-view.tsx b/src/components/folder-selection-view.tsx
index 5e907458..55df4c52 100644
--- a/src/components/folder-selection-view.tsx
+++ b/src/components/folder-selection-view.tsx
@@ -187,15 +187,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
               <div class="panel-list">
                 <For each={folders()}>
                   {(folder, index) => (
-                    <div class="panel-list-item">
-                      <div class="flex items-center">
+                    <div 
+                      class="panel-list-item w-full"
+                      classList={{
+                        "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                      }}
+                    >
+                      <div class="flex items-center w-full">
                         <button
-                          class="panel-list-item-content"
-                          classList={{
-                            "panel-list-item-highlight ring-2 ring-inset":
-                              focusMode() === "recent" && selectedIndex() === index(),
-                          }}
-                          style={{ "--tw-ring-color": "var(--accent-primary)" }}
+                          class="panel-list-item-content flex-1 w-full"
                           onClick={() => handleFolderSelect(folder.path)}
                           onMouseEnter={() => {
                             setFocusMode("recent")
@@ -218,7 +218,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                           </div>
                           <Show when={focusMode() === "recent" && selectedIndex() === index()}>
                             <kbd class="kbd">
-                              ↵
+                              ↵ 
                             </kbd>
                           </Show>
                         </button>
diff --git a/src/components/instance-welcome-view.tsx b/src/components/instance-welcome-view.tsx
index 3119c136..b3cd18de 100644
--- a/src/components/instance-welcome-view.tsx
+++ b/src/components/instance-welcome-view.tsx
@@ -179,14 +179,15 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
               <div class="panel-list">
                 <For each={parentSessions()}>
                   {(session, index) => (
-                    <div class="panel-list-item">
+                    <div 
+                      class="panel-list-item w-full"
+                      classList={{
+                        "panel-list-item-highlight": focusMode() === "sessions" && selectedIndex() === index(),
+                      }}
+                    >
                       <button
                         data-session-index={index()}
-                        class="panel-list-item-content group"
-                        classList={{
-                          "panel-list-item-highlight ring-accent-inset":
-                            focusMode() === "sessions" && selectedIndex() === index(),
-                        }}
+                        class="panel-list-item-content group w-full"
                         onClick={() => handleSessionSelect(session.id)}
                         onMouseEnter={() => {
                           setFocusMode("sessions")
diff --git a/src/components/session-picker.tsx b/src/components/session-picker.tsx
index 2bf9cdfc..84dfcb57 100644
--- a/src/components/session-picker.tsx
+++ b/src/components/session-picker.tsx
@@ -85,10 +85,10 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                       {(session) => (
                         <button
                           type="button"
-                          class="selector-option w-full text-left"
+                          class="selector-option w-full text-left hover:bg-surface-hover focus:bg-surface-hover"
                           onClick={() => handleSessionSelect(session.id)}
                         >
-                          <div class="selector-option-content">
+                          <div class="selector-option-content w-full">
                             <span class="selector-option-label truncate">
                               {session.title || "Untitled"}
                             </span>
diff --git a/src/styles/components.css b/src/styles/components.css
index bfd0699d..76802c66 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1029,7 +1029,7 @@
 }
 
 .selector-option {
-  @apply px-3 py-2 cursor-pointer rounded outline-none transition-colors flex items-start gap-2;
+  @apply px-3 py-2 cursor-pointer rounded outline-none transition-colors flex items-start gap-2 w-full;
   color: var(--text-primary);
 }
 
@@ -1373,7 +1373,7 @@
 }
 
 .panel-list-item {
-  @apply border-b last:border-b-0 transition-colors;
+  @apply border-b last:border-b-0 transition-colors w-full;
   border-color: var(--border-base);
 }
 
@@ -1381,20 +1381,20 @@
   background-color: var(--surface-hover);
 }
 
-.panel-list-item-content {
-  @apply flex-1 text-left px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors;
-}
-
-.panel-list-item-content:hover {
-  background-color: var(--surface-hover);
-}
-
 .panel-list-item-highlight {
-  background-color: rgba(0, 102, 255, 0.1);
+  background-color: rgba(0, 102, 255, 0.1) !important;
 }
 
 [data-theme="dark"] .panel-list-item-highlight {
-  background-color: rgba(0, 128, 255, 0.2);
+  background-color: rgba(0, 128, 255, 0.2) !important;
+}
+
+.panel-list-item-content {
+  @apply flex-1 text-left px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors w-full;
+}
+
+.panel-list-item-content:hover {
+  background-color: transparent;
 }
 
 .panel-empty-state {