Commit Graph

4 Commits

Author SHA1 Message Date
Jordi Enric bf16d7f613 fix(reports): fix report block styling issues FE-2844 (#44436)
## Problem

The Report Blocks section (custom dashboards) has four visual and UX
bugs: tooltip content overflows its container, Y-axis labels with 5+
digits get clipped (e.g. `10000` renders as `0000`), action buttons
become unreachable when a block title is long, and scrolling inside a
scrollable block also scrolls the parent page.

## Fix

- Remove the fixed `w-[200px]` class from `ChartTooltipContent` in
`ChartBlock` so tooltips auto-size to their content instead of
overflowing.
- Compute a dynamic Y-axis width in `ChartBlock` based on the string
length of the maximum data value, replacing the `undefined` default that
caused clipping.
- Add `min-w-0` to the label container and `shrink-0` to the actions
container in `ReportBlockContainer` so the truncation works correctly
and action buttons are never pushed off-screen.
- Add `overscroll-contain` to the scrollable SQL code and results table
divs in `QueryBlock` to stop scroll events from propagating to the page.

## How to test

- Navigate to a custom Report with multiple blocks
- Hover over a chart bar on a block with a long metric name. The tooltip
should be fully visible with no text overflow.
- Find or create a block whose Y-axis values exceed 9999 (e.g. disk
IOPS). The full number should appear on the Y-axis without any leading
digits being clipped.
- Use a block on a read replica so the label appends "of replica",
making it long. The chart-type toggle, log scale toggle, and remove
buttons should all remain visible and clickable.
- Add a SQL snippet block that returns a large table of results. Scroll
within the results table. The page should not scroll while the inner
table is scrolling.

## Before
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 45@2x"
src="https://github.com/user-attachments/assets/8e7bd3c9-8319-47c9-b2d9-b194d2803809"
/>


## After
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 15@2x"
src="https://github.com/user-attachments/assets/6ca5873a-cd09-4001-9cd0-932c12b6536e"
/>


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

* **Style**
* More consistent Y-axis sizing with dynamic widths for better label
fit.
* Improved Y-axis number formatting (K/M suffixes, sensible decimals)
for clearer tick labels.
* Simplified, more flexible chart tooltips (min-width applied; removed
fixed widths).
* Tighter report header layout so labels truncate predictably and
actions keep their size.
* Added overscroll containment to query results and SQL view to reduce
unwanted scrolling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 14:01:38 +00:00
Charis 4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Jordi Enric a36c50ad88 add logarithmic option to custom reports (#43001)
https://linear.app/supabase/issue/FE-2595/dashboard-feedback-logarithmic-scale-option-for-custom-report-charts#comment-19c2f27a

- adds logarithmic view option to charts
<img width="1308" height="866" alt="CleanShot 2026-02-18 at 21 15 56@2x"
src="https://github.com/user-attachments/assets/2ed95d0e-ccd0-4cd1-9a3b-ac9ae5628995"
/>
2026-02-19 07:20:12 -07:00
Joshen Lim 0710d62665 ReportsV2 P1: Add Query block component (#32738)
* Create QueryBlock component which will be a shared component used in AI Assistant and Reports

* Deprecate AIAssistantPanel/SqlSnippet.ts

* Fix user messages not getting persisted, only assistant messages

* Add loading state to for query results in QueryBlock + hide block view configuration if query block is not chart

* Address feedback

* Fix TS

* fix double border

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2025-01-15 13:08:26 +08:00