fix: ensure full width highlighting for list items in sessions and folders
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user