[local-explorer-ui] "New Query" button overlaps tab labels when tab bar narrows

Open Beginner friendly
  • Is something wrong?
#16,763 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start in packages/local-explorer-ui/src/components/studio/window-tab/ and find StudioWindowTabMenu; inspect how the tab strip and New Query action are laid out. Reproduce the narrow tab bar with the documented dev command, then check that the action stays fixed and tab overflow controls navigate the tabs without overlap.

Written by the indexing model from the issue text.

Description

bug feature:local-explorer
What versions & operating system are you using?
  • Wrangler V4.158
  • MacOS Golden Gate 27.2
  • Firefox 159.0
Please provide a link to a minimal reproduction

https://github.com/cloudflare/workers-sdk/tree/main/fixtures/worker-with-resources

Describe the Bug
  1. Run the local explorer dev environment from the repo root:
    pnpm --filter @cloudflare/local-explorer-ui dev
  2. Navigate to Studio > D1 and open multiple query/table tabs (or reduce the browser window width).
  3. Observed: The sticky + New Query button in StudioWindowTabMenu compresses, wraps onto two lines, and overlaps the text of underlying tabs because it lacks a solid background and shrink-0.
  4. Expected: The + New Query button stays fixed on the right without overlapping tab text, and horizontal overflow controls (< / >) allow navigating tabs when they exceed the available width.
Image
Proposed solution

I have already reproduced and tested a fix locally in packages/local-explorer-ui/src/components/studio/window-tab/

Image
  1. Decouple the scrollable tab strip (overflow-x-auto) from the fixed right-side action container (shrink-0 bg-kumo-elevated).
  2. Using existing button component from "@cloudflare/kumo"
export function StudioWindowTabMenu({
	onClick,
}: StudioWindowTabMenuProps): JSX.Element {
	return (
		<div className="sticky right-0 flex items-center px-2 border-b border-kumo-fill bg-kumo-elevated">
			<Button
				variant="ghost"
				size="sm"
				onClick={onClick}
				type="button"
			>
				<PlusIcon /> New Query
			</Button>
		</div>
	);
}

I'd love to contribute this fix—could a maintainer vouch/register me as a collaborator so I can submit the PR?

Please provide any relevant error logs

No response

Dominant language
TypeScript
Stars
4.7k
Forks
1.6k
Avg merge
1d 20h
Merged PRs (30d)
257

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cloudflare/workers-sdk

All issues in cloudflare/workers-sdk

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.