From d050d32d24c9accb33ccffd7b9832d7fe8201f33 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 21:04:31 +0100
Subject: [PATCH] fix(settings): remove flicker and scrollbar flash on context
 switch

---
 .../settings/unified/UnifiedSettingsModal.tsx      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index dffc77b..cee3b2c 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -158,7 +158,7 @@ function TabBar({
   onChange: (id: string) => void
 }) {
   return (
-    <div className="flex gap-1 overflow-x-auto scrollbar-hide pb-px">
+    <div className="flex gap-1 overflow-x-auto overflow-y-hidden scrollbar-hide pb-px">
       {tabs.map(tab => (
         <button
           key={tab.id}
@@ -362,15 +362,15 @@ export default function UnifiedSettingsModal() {
                 </div>
               </div>
 
-              {/* Content */}
-              <div className="flex-1 overflow-y-auto">
+              {/* Content — fixed min-height prevents size jumping between contexts */}
+              <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-[400px]">
                 <AnimatePresence mode="wait">
                   <motion.div
                     key={`${context}-${activeTab}`}
-                    initial={{ opacity: 0, x: 8 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    exit={{ opacity: 0, x: -8 }}
-                    transition={{ duration: 0.15 }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.12 }}
                     className="p-6"
                   >
                     <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} />