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

align instance tab accessories to right

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-06 22:38:43 +00:00
parent 864d665049
commit 1fbf51b7ae
2 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/ui/src/components/instance-tabs.tsx
View File

@@ -20,24 +20,27 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
<div class="tab-container" role="tablist"> <div class="tab-container" role="tablist">
<div class="tab-scroll"> <div class="tab-scroll">
<div class="tab-strip"> <div class="tab-strip">
<For each={Array.from(props.instances.entries())}> <div class="tab-strip-tabs">
{([id, instance]) => ( <For each={Array.from(props.instances.entries())}>
<InstanceTab {([id, instance]) => (
instance={instance} <InstanceTab
active={id === props.activeInstanceId} instance={instance}
onSelect={() => props.onSelect(id)} active={id === props.activeInstanceId}
onClose={() => props.onClose(id)} onSelect={() => props.onSelect(id)}
/> onClose={() => props.onClose(id)}
)} />
</For> )}
<button </For>
class="new-tab-button" <button
onClick={props.onNew} class="new-tab-button"
title="New instance (Cmd/Ctrl+N)" onClick={props.onNew}
aria-label="New instance" title="New instance (Cmd/Ctrl+N)"
> aria-label="New instance"
<Plus class="w-4 h-4" /> >
</button> <Plus class="w-4 h-4" />
</button>
</div>
<div class="tab-strip-spacer" />
<Show when={Array.from(props.instances.entries()).length > 1}> <Show when={Array.from(props.instances.entries()).length > 1}>
<div class="tab-shortcuts"> <div class="tab-shortcuts">
<KeyboardHint <KeyboardHint
@@ -49,7 +52,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
</Show> </Show>
<Show when={Boolean(props.onOpenRemoteAccess)}> <Show when={Boolean(props.onOpenRemoteAccess)}>
<button <button
class="new-tab-button" class="new-tab-button tab-remote-button"
onClick={() => props.onOpenRemoteAccess?.()} onClick={() => props.onOpenRemoteAccess?.()}
title="Remote connect" title="Remote connect"
aria-label="Remote connect" aria-label="Remote connect"

16
packages/ui/src/styles/panels/tabs.css
View File

@@ -17,18 +17,32 @@
} }
.tab-scroll { .tab-scroll {
@apply flex items-center gap-3 w-full; @apply w-full;
overflow-x: auto; overflow-x: auto;
} }
.tab-strip { .tab-strip {
@apply flex items-center gap-2 px-1;
min-width: 100%;
}
.tab-strip-tabs {
@apply flex items-center gap-1 flex-shrink-0; @apply flex items-center gap-1 flex-shrink-0;
} }
.tab-strip-spacer {
@apply flex-1;
min-width: 1px;
}
.tab-shortcuts { .tab-shortcuts {
@apply flex items-center gap-2 flex-shrink-0; @apply flex items-center gap-2 flex-shrink-0;
} }
.tab-remote-button {
@apply flex-shrink-0;
}
.tab-base { .tab-base {
@apply inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors text-sm font-medium; @apply inline-flex items-center gap-2 px-3 py-2 rounded-t-md max-w-[200px] transition-colors text-sm font-medium;
font-family: var(--font-family-sans); font-family: var(--font-family-sans);