mirror of
https://github.com/supabase/supabase.git
synced 2026-09-08 19:08:44 +08:00
## What kind of change does this PR introduce? Studio interface fix. ## What is the current behavior? Region flags with light backgrounds, such as Japan, can disappear against light Studio surfaces. Flag rendering is also repeated across region selectors and infrastructure views. ## What is the new behavior? Region flags use a shared `RegionFlag` component with the existing small radius and a subtle 1px border. The treatment is applied consistently across project creation, replication, read replicas, infrastructure, and Edge Function observability. | Before | After | | --- | --- | | <img width="746" height="246" alt="CleanShot 2026-08-25 at 14 01 07@2x" src="https://github.com/user-attachments/assets/5ccffccd-f253-47ca-a587-e97d1e8306a8" /> | <img width="746" height="234" alt="CleanShot 2026-08-25 at 14 09 20@2x" src="https://github.com/user-attachments/assets/9d59f7f6-4364-4c2c-8b97-a9673616736a" /> | ## To test - Open the new project flow and inspect the selected region and region menu. Confirm light flags remain visible without changing size or aspect ratio. - Open Database Replication and inspect region flags in the diagram and destination form. - Open `/project/<ref>/settings/infrastructure` and inspect flags in the topology, map, and read replica details. - Open Edge Function observability and inspect the region filter options. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Standardized region flag displays across project creation, replication, infrastructure, read replica, and observability views. * Region flags now use consistent styling, rounded borders, and rendering throughout the Studio interface. * Improved visual consistency for selected regions, database nodes, tooltips, and region options. * Decorative flags in observability views are handled appropriately for assistive technologies. <!-- end of auto-generated comment: release notes by coderabbit.ai -->