Files
Saxon Fletcher 2759b13efc refine display settings ui (#49466)
<img width="392" height="343" alt="image"
src="https://github.com/user-attachments/assets/4a17e3ad-364d-45c6-9770-0f937ad18418"
/>


## 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?

Studio UI refinement.

## What is the current behavior?

The Explorer result settings popover uses a spacious vertical layout
with mixed control heights and local active-state overrides.

## What is the new behavior?

- Condenses the result settings into the horizontal form layout used by
compact settings surfaces.
- Uses base ToggleGroup, Select, MultiSelector, and Switch component
variants.
- Adds shared tiny Toggle and MultiSelector sizes so the compact
controls render at 26px.
- Uses the accent token for shared toggle active states.
- Keeps the chart configuration behavior and disabled states intact.

## Verification

- UI and UI Patterns focused tests
- UI, UI Patterns, and Studio typechecks
- Studio ESLint
- Local visual verification against the supplied prototype



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Improvements**
* Chart-specific configuration options now appear only when chart view
is selected, keeping display settings focused and relevant.
* Updated chart controls provide clearer options for scale, cumulative
values, and labels.
* Added compact sizing for multi-select fields and toggles to improve
alignment with other form controls.
* Refined toggle styling and adjusted small-size dimensions for a more
consistent interface.

* **Tests**
  * Added coverage for compact multi-select and toggle sizes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
2026-08-25 18:16:40 +10:00
..
2026-08-24 16:19:17 +08:00