Five layout fixes across Explorer chat, notebooks, and the sidebar.
### Chat
- **Conversation fade overlapped the scrollbar.** The top and bottom
gradients are positioned against the conversation's padding box, which
includes the scroll container's scrollbar gutter, so `inset-x-0` painted
them over the scrollbar. They now stop at the conversation's content
gutter, which `Conversation` owns for both the content and the fades.
- **Composer background bled past the input's radius.** The form paints
the surface behind the textarea but had no radius of its own, so its
square corners showed outside the `rounded-lg` input. It now shares the
radius.
- **Message parts used two different widths.** Wide parts come down to
`max-w-3xl` so every part shares a column, matching `AssistantQueryCell`
and `AssistantNotebookPreview`. `isWide` / `isWideMessagePart` stay in
place with both widths equal, so a part can diverge again later without
rebuilding the mechanism.
### Notebooks
- **Cell controls sat at the container edge.** Each cell centred itself
at its own max width while the grip and add-cell button stayed at the
far left of the full-width row, leaving a large gap. `SortableSection`
takes a `sectionWidth` and carries its control gutter twice — once as
the controls, once as padding on the other side — so the section stays
centred with its controls immediately beside it. Cell widths are
unchanged (prose `48rem`, query `72rem`); set them equal and the two
cell types' controls line up on their own.
The controls stay in flow rather than floating in an outside gutter, so
on a viewport narrower than the cap the row just fills the space instead
of clipping the controls into the padding.
### Sidebar
- **Search icon didn't line up with the menu row icons.** The row box
already sits flush with the search input's box, so rows moved from
`pl-3` to `pl-2` to put their icons on the same 8px offset the search
icon uses. Spacing between the input and the list now matches the 12px
side padding.
### Testing
`pnpm --filter studio run typecheck`, Prettier, and 378 tests across
`Explorer`, `ProjectHome`, `AIAssistantPanel`, and `ExplorerLayout`
pass. ESLint warning counts are unchanged from master.
These were reasoned from layout rather than checked in a browser, so
they're worth a look on a preview before merge.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Updated Explorer layouts with flexible, configurable widths for
notebook and query sections.
* Refined navigation spacing and padding across Explorer views.
* Centered and standardized AI Assistant preview, query, and message
content widths.
* Improved chat form styling with rounded corners.
* Adjusted conversation spacing and fade overlays to avoid overlapping
the scrollbar.
* Preserved full-width behavior where appropriate while keeping controls
aligned.
* **Tests**
* Updated layout tests to reflect revised width and alignment behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
## Summary
* Closes the block options popover (grip dropdown menu) when a drag
operation starts on that block
* Fixes the issue where the menu would remain visible during the drag if
it was already open
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Section action menus now remain closed when dragging begins,
preventing delayed reopening and keeping the editing interface clear and
focused.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Adds a confirmation modal when hitting "run notebook" if the notebook
contains any query cells that involve any sort of mutation (insert,
update, alter, etc, etc). Also gives users the option to run the
notebook's read only cells as an alternative.
<img width="432" height="355" alt="image"
src="https://github.com/user-attachments/assets/0413a3ad-5419-4c83-8bf3-976bfa683b9a"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added confirmation prompts before running queries that may modify data
or database structure.
* Prompts identify potentially mutating notebook queries and allow
running read-only cells instead.
* Query execution now includes checks for destructive operations and
missing row-level security, with optional automatic setup.
* Notebook runs use the latest saved and unsaved SQL and reliably reset
execution status.
* **Bug Fixes**
* Improved notebook layout behavior so content shrinks correctly within
flexible sections.
* **Tests**
* Expanded coverage for mutation detection, comments, multiple
statements, live SQL, and cell filtering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to Explorer/Notebooks - this PR adds the functionality to add /
remove cells
Separately - am thinking we can shift a lot of the "cell update" logic
into notebook-state, mainly so that each UI component doesn't need to be
aware of the notebook's `cells` but just its own cell.
I'll do it separately though to prevent bloating this PR, already left
comments where i think can be refactored
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/91aae5f9-07b9-4327-8e21-8e9d71098aa6"
/>
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/677de208-5c52-4155-90c6-bc0879070693"
/>
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/17c3dae7-87bc-40bb-bfa0-15df101006ce"
/>
<img width="1091" height="262" alt="image"
src="https://github.com/user-attachments/assets/a09c3d23-696a-4b55-a1f8-4602e56a60dc"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## New Features
- Add query and Markdown cells directly within notebooks.
- Move, remove, and reorder cells using drag-and-drop or cell controls.
- Add cells from empty states and notebook toolbar actions.
- Edit Markdown cells, mark edits as complete, and see placeholders for
empty content.
## Improvements
- Cell controls and hover interactions are more consistent and
responsive.
- Moving cells is disabled at the top or bottom of a notebook.
- Sample cells now use standardized content and formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to Explorer / Notebooks - adds a barebones query cell that
minimally can run SQL queries + render results
The intention is to migrate the components used in the SQL Editor into
this new Query cell since all the functionality is very similar, but the
SQL Editor component is tightly coupled to the SQL Editor valtio store.
So we'll be duplicating a bit of UI for now - which will also make
deprecating the SQL Editor eventually a bit easier by just deleting them
Have deliberately omitted a lot of details for now just to keep the PRs
small, so will be continuing to build out the QueryCell's functionality
in subsequent PRs. This includes
- Source selector
- Data display (Table / Chart)
- Autolimit logic
Other changes also includes
- Updating NotebookEditor to use the new Explorer UI components that
Saxon introduced
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/d709f6f1-f6cc-4e6a-babd-f5b68bba2a55"
/>
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/a286ceca-ac84-4fbd-afd5-b24f940e2e29"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added notebook database cells for writing, editing, and running SQL
queries.
* Added query result displays with loading, empty, error, row-limit, and
result states.
* Added editable notebook titles with save and cancel controls.
* New notebooks can start with customizable Markdown and SQL cells.
* Added helpful SQL error actions, including copying messages, database
connection guidance, and AI Assistant support where available.
* **Improvements**
* Improved notebook spacing, section layout, toolbar tooltips, and
empty-result presentation.
* Markdown changes now save automatically through the notebook editor.
* Improved drag-and-drop controls and query visibility management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
More groundwork for the Explorer - this PR introduces the Markdown cells
and some basic (non data persisting) editing
Markdown cells will save either on
- Save button click
- Losing focus on the code editor
Hitting esc will cancel the changes
<img width="1387" height="674" alt="image"
src="https://github.com/user-attachments/assets/f0614b37-7a11-404f-9940-8bcd4de25c57"
/>
<img width="1087" height="516" alt="image"
src="https://github.com/user-attachments/assets/0a104168-2001-4ef7-934a-7e864956b3cb"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added editable Markdown cells to notebooks, with save and cancel
controls.
* Added drag-and-drop reordering for notebook cells, including keyboard
support.
* New notebooks now include sample Markdown content to help users get
started.
* **Improvements**
* Improved drag-handle placement and consistency across sortable
sections.
* Updated notebook empty and populated states to reflect the current
cell content.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
