salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure full width highlighting for list items in sessions and folders

Browse Source
This commit is contained in:
Shantur Rathore
2025-10-28 21:42:39 +00:00
parent 70fe2cab01
commit 47852df9d7
4 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/folder-selection-view.tsx
View File

@@ -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>

13
src/components/instance-welcome-view.tsx
View File

@@ -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")

4
src/components/session-picker.tsx
View File

@@ -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>

24
src/styles/components.css
View File

@@ -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 {