keep instance tab close buttons visible

This commit is contained in:
Shantur Rathore
2025-12-03 00:09:07 +00:00
parent 11be314f63
commit 9e0fbd185d
3 changed files with 31 additions and 29 deletions

View File

@@ -17,7 +17,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
return ( return (
<div class="tab-bar tab-bar-instance"> <div class="tab-bar tab-bar-instance">
<div class="tab-container" role="tablist"> <div class="tab-container" role="tablist">
<div class="flex items-center gap-1 overflow-x-auto"> <div class="tab-scroll flex items-center gap-3 overflow-x-auto w-full">
<div class="flex items-center gap-1">
<For each={Array.from(props.instances.entries())}> <For each={Array.from(props.instances.entries())}>
{([id, instance]) => ( {([id, instance]) => (
<InstanceTab <InstanceTab
@@ -38,7 +39,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
</button> </button>
</div> </div>
<Show when={Array.from(props.instances.entries()).length > 1}> <Show when={Array.from(props.instances.entries()).length > 1}>
<div class="flex-shrink-0 ml-4"> <div class="flex-shrink-0 ml-auto pl-4">
<KeyboardHint <KeyboardHint
shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter( shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
Boolean, Boolean,
@@ -48,6 +49,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
</Show> </Show>
</div> </div>
</div> </div>
</div>
) )
} }

View File

@@ -52,7 +52,7 @@
} }
.tab-close { .tab-close {
@apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer; @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
} }
.tab-close:focus-visible { .tab-close:focus-visible {

View File

@@ -51,7 +51,7 @@
} }
.tab-close { .tab-close {
@apply opacity-0 group-hover:opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer; @apply opacity-100 hover:bg-red-500 hover:text-white rounded p-0.5 transition-all cursor-pointer;
} }
.tab-close:focus-visible { .tab-close:focus-visible {