From 184607fc7d98980feb9f0fbbc406aa454e94af50 Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Wed, 30 Sep 2026 14:43:00 -0700
Subject: [PATCH 1/2] Remove edge fade from tab rows

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/FrameworkIconTabs.tsx | 2 +-
 src/components/markdown/FileTabs.tsx | 2 +-
 src/components/markdown/Tabs.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FrameworkIconTabs.tsx b/src/components/FrameworkIconTabs.tsx
index 0034eeece..f8d1e71d6 100644
--- a/src/components/FrameworkIconTabs.tsx
+++ b/src/components/FrameworkIconTabs.tsx
@@ -30,7 +30,7 @@ export function FrameworkIconTabs({
       role="group"
       aria-label="Choose framework"
       className={twMerge(
-        'fade-x fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default scrollbar-hide',
+        'flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default scrollbar-hide',
         className,
       )}
     >
diff --git a/src/components/markdown/FileTabs.tsx b/src/components/markdown/FileTabs.tsx
index de3462f01..40188fa32 100644
--- a/src/components/markdown/FileTabs.tsx
+++ b/src/components/markdown/FileTabs.tsx
@@ -50,7 +50,7 @@ export function FileTabs({ tabs, children }: FileTabsProps) {
       <div
         role="tablist"
         onKeyDown={handleTabListKeyDown}
-        className="fade-x fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
+        className="flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
       >
         {tabs.map((tab) => {
           const isActive = activeSlug === tab.slug
diff --git a/src/components/markdown/Tabs.tsx b/src/components/markdown/Tabs.tsx
index 183ca2dec..b3f8d6806 100644
--- a/src/components/markdown/Tabs.tsx
+++ b/src/components/markdown/Tabs.tsx
@@ -85,7 +85,7 @@ export function Tabs({
       <div
         role="tablist"
         onKeyDown={handleTabListKeyDown}
-        className="not-prose fade-x fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
+        className="not-prose flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
       >
         {tabsProp.map((tab) => {
           return (

From bcbe327132837f312e09038fd8a6e20dc16f7567 Mon Sep 17 00:00:00 2001
From: ladybluenotes <hello@sarahgerrard.me>
Date: Wed, 30 Sep 2026 14:54:28 -0700
Subject: [PATCH 2/2] Preserve tab borders with end-only fade

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/FrameworkIconTabs.tsx | 2 +-
 src/components/markdown/FileTabs.tsx | 2 +-
 src/components/markdown/Tabs.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FrameworkIconTabs.tsx b/src/components/FrameworkIconTabs.tsx
index f8d1e71d6..642f97fbb 100644
--- a/src/components/FrameworkIconTabs.tsx
+++ b/src/components/FrameworkIconTabs.tsx
@@ -30,7 +30,7 @@ export function FrameworkIconTabs({
       role="group"
       aria-label="Choose framework"
       className={twMerge(
-        'flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default scrollbar-hide',
+        'fade-end fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default scrollbar-hide',
         className,
       )}
     >
diff --git a/src/components/markdown/FileTabs.tsx b/src/components/markdown/FileTabs.tsx
index 40188fa32..174b9baad 100644
--- a/src/components/markdown/FileTabs.tsx
+++ b/src/components/markdown/FileTabs.tsx
@@ -50,7 +50,7 @@ export function FileTabs({ tabs, children }: FileTabsProps) {
       <div
         role="tablist"
         onKeyDown={handleTabListKeyDown}
-        className="flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
+        className="fade-end fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
       >
         {tabs.map((tab) => {
           const isActive = activeSlug === tab.slug
diff --git a/src/components/markdown/Tabs.tsx b/src/components/markdown/Tabs.tsx
index b3f8d6806..c9292ef1e 100644
--- a/src/components/markdown/Tabs.tsx
+++ b/src/components/markdown/Tabs.tsx
@@ -85,7 +85,7 @@ export function Tabs({
       <div
         role="tablist"
         onKeyDown={handleTabListKeyDown}
-        className="not-prose flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
+        className="not-prose fade-end fade-size-x-sm flex items-center justify-start gap-1 overflow-x-auto overflow-y-hidden border-b border-border-default"
       >
         {tabsProp.map((tab) => {
           return (