Explorer query surfaces now use `bg-card` in light mode and `bg-muted`
in dark mode, including embedded notebook/chat queries and query tab
toolbars. Notebook Run buttons match query tabs, with `ml-1` spacing on
both. Fix doubled tab separators by applying the leading border only to
the first tab.
### How to test
1. Open Explorer with multiple query, notebook, and chat tabs. Switch,
reorder, and close tabs; confirm each separator stays one pixel wide.
2. In light and dark mode, inspect query tabs and embedded notebook/chat
queries: backgrounds should be card in light mode and muted in dark
mode, including their toolbars.
3. Compare notebook and query Run buttons: matching default styling and
spacing. Run a read-only query such as `select 1` in both and check
loading and results.
4. Check SQL Editor and Table Editor tab separators, since the tab
component is shared.
Validation: Prettier passed for all four changed files. Manual checks
above have not been run.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Refined notebook and query run button styling, including spacing and
tooltip placement.
- Improved query editor panel backgrounds across light and dark themes.
- Updated tab border rendering for more consistent visual alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What's changed
Stack 1/2 (next: https://github.com/supabase/supabase/pull/49985).
- `QueryEditor` (`viewport` variant, e.g. Explorer query tabs and
assistant query cells) now renders the SQL editor and results in a
vertical `ResizablePanelGroup` instead of a fixed `h-[45%]` editor. The
split is persisted under `LOCAL_STORAGE_KEYS.EXPLORER_QUERY_SPLIT_SIZE`.
The `embedded` variant (notebooks) is unchanged.
- Editor and results JSX are extracted into `querySql` / `queryResults`
so the two layouts share one definition.
- `isRunDisabled` now hides the toolbar run button instead of rendering
it disabled (editor shortcuts are still disabled). `AssistantQueryCell`
only sets it while an approval is pending, so the run button comes back
once the tool call has resolved.
- `QueryRunButton`: "Run selected" → "Run selected SQL", plain
`DropdownMenuItem` instead of `DropdownMenuItemTooltip`.
- `QueryResultError` no longer paints its own table-header background.
## How to test
1. Explorer → open a query tab. Drag the handle between the editor and
results; reload — the split size is restored.
2. Toggle "Hide query" / "Show query" — results fill the tab when the
editor is hidden.
3. Open a notebook — cells still render with the fixed-height editor (no
resizable handle).
4. In the AI Assistant, ask for a query that needs approval. While the
approval footer is shown there is no run button in the cell toolbar;
after "Run query" / "Skip", the run button appears and works.
5. `pnpm --filter studio exec vitest --run
components/interfaces/Explorer` passes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **User Interface**
- Query results now appear in a resizable vertical split view, allowing
users to adjust the space allocated to the editor and results.
- Updated query result styling provides a cleaner background
presentation.
- Query result panels are better centered when appropriate.
- **Query Execution**
- The menu option is now labeled **“Run selected SQL.”**
- The run button is hidden when query execution is unavailable.
- **AI Assistant**
- Query execution is disabled only during the relevant confirmation
states.
- Assistant query panels now use a wider, full-width layout.
- Debugging a query now updates the assistant’s initial input.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
UI refinements for Explorer query surfaces.
## What is the current behavior?
- The assistant chat textarea uses a tighter radius than the Run SQL /
Create a notebook cards on Explorer home.
- Chart results sit unevenly in the results pane because axis gutters
stack on card padding, and long Y labels can clip.
- Selecting SQL in the editor changes the primary Run button to Run
selected, which is easy to trigger by accident.
- The Prettify SQL icon in notebook query cells uses Lucide's default
size, so it doesn't match other toolbar actions.
## What is the new behavior?
- Assistant chat form uses `rounded-lg` so it matches the home action
cards everywhere the form is used.
- Query result charts collapse unused axis space, add a little padding
when labels are on, and size the Y axis from formatted ticks so longer
labels fit.
- Run is a default split button that always executes the full query. Run
selected is a secondary menu item, disabled until SQL is selected.
- Notebook cell Prettify SQL icons use `size={16}` and `strokeWidth={2}`
like the rest of the Explorer toolbar.
## Additional context
Cmd+Enter in the editor still runs the current selection when there is
one.
## Test plan
- [ ] Open Explorer home and confirm the assistant chat radius matches
the Run SQL and Create a notebook cards.
- [ ] Run a query, switch to chart view, and check spacing with labels
off and on, including large Y values.
- [ ] With no selection, click Run and confirm the full query runs. Open
the split menu and confirm Run selected is disabled.
- [ ] Select SQL, click Run, and confirm the full query still runs. Use
Run selected from the menu to run only the selection.
- [ ] In a notebook query cell, confirm Prettify SQL matches the size
and stroke of nearby toolbar icons.
Made with [Cursor](https://cursor.com)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added a split Run control in the query editor, with separate actions
for running all content or only selected text.
- Added support for customizing chart X-axis display settings.
- Improved chart Y-axis sizing, scaling, and tick formatting for clearer
results.
- **Bug Fixes**
- The “Run selected” action is unavailable when no text is selected.
- **Style**
- Updated toolbar icon sizing and added rounded corners to the assistant
chat input.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Saxon Fletcher