From b66258c0b8fa1ab2b27f149d691d39b9a2e4057e Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Thu, 27 Aug 2026 11:51:07 +0100
Subject: [PATCH] feat(studio): improve feature preview sidebar legibility
 (#49616)

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

Based off user feedback, improvement for general legibility of items and
light mode.

| Before | After |
|--------|--------|
| <img width="1950" height="1416" alt="CleanShot 2026-08-26 at 17 56
33@2x"
src="https://github.com/user-attachments/assets/29bc6d28-9600-4fea-af28-11097450c1e5"
/> | <img width="2008" height="1446" alt="CleanShot 2026-08-26 at 17 55
47@2x"
src="https://github.com/user-attachments/assets/da002085-cc8f-4baf-8bc3-ca7a605ae04b"
/> |
| <img width="2028" height="1472" alt="CleanShot 2026-08-26 at 17 56
46@2x"
src="https://github.com/user-attachments/assets/54c810fa-c455-449d-b9c9-2c1022d12b59"
/> | <img width="2034" height="1464" alt="CleanShot 2026-08-26 at 17 59
50@2x"
src="https://github.com/user-attachments/assets/19094e8e-4ab5-4faf-bac7-5d8aefc70f6c"
/> |




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

## Summary by CodeRabbit

* **Style**
* Updated feature preview navigation with clearer selected and
unselected item styling.
  * Applied tertiary backgrounds to accordion items.
  * Removed unnecessary open-state and individual item border styling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../App/FeaturePreview/FeaturePreviewModal.tsx     | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index ff43cc11831..606e6198125 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -150,12 +150,8 @@ export const FeaturePreviewModal = () => {
                           ? allFeaturePreviews.filter((x) => x.category === undefined)
                           : allFeaturePreviews.filter((x) => x.category === category)
                       return (
-                        <AccordionItem
-                          key={category}
-                          value={category}
-                          className="data-[state=open]:border-b-0"
-                        >
-                          <AccordionTrigger className="text-xs font-mono uppercase tracking-tight px-4 text-foreground-lighter py-2">
+                        <AccordionItem key={category} value={category}>
+                          <AccordionTrigger className="text-xs font-mono uppercase tracking-tight px-4 text-foreground-lighter py-2 bg-tertiary dark:bg-transparent">
                             {category}
                           </AccordionTrigger>
                           <AccordionContent className="[&>div]:pb-0">
@@ -320,8 +316,10 @@ const FeaturePreviewItem = ({
       key={feature.key}
       onClick={() => selectFeaturePreview(feature.key)}
       className={cn(
-        'w-full! flex-1 flex items-center justify-between p-4 border-b cursor-pointer bg transition',
-        selectedFeature?.key === feature.key ? 'bg-accent' : 'bg-card',
+        'w-full! flex-1 flex items-center justify-between p-4 cursor-pointer bg transition',
+        selectedFeature?.key === feature.key
+          ? 'bg-muted dark:bg-accent text-foreground'
+          : 'bg-card text-foreground-light',
         className
       )}
     >