Files
supabase/packages/ui-patterns
kemal.earth ed921f36f7 feat(studio): streamline status health visual (#46274)
## 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?

Just a little bit of design polish for the observability overview status
health.

| Before | After |
|--------|--------|
| <img width="963" height="714" alt="Screenshot 2026-05-22 at 14 15 03"
src="https://github.com/user-attachments/assets/3d67d175-434b-48a6-b87b-15e074d2cc27"
/> | <img width="1068" height="846" alt="Screenshot 2026-05-26 at 13 26
55"
src="https://github.com/user-attachments/assets/c3f728ef-309c-42ec-9810-37bf6564a470"
/> |








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

* **New Features**
  * Added option to hide date range in logs bar charts.

* **Improvements**
* Redesigned service health table to a responsive card/grid layout with
richer status indicators, improved charts, loading and empty states, and
clearer per-service CTAs.
  * Chart empty state now renders title/description only when provided.

* **Style**
  * Adjusted footer top padding for improved spacing.

* **Chores**
* Reordered import and service configuration entries (rendering order
updated).

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46274?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-27 10:30:19 +01:00
..

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.