ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix(settings): remove flicker and scrollbar flash on context switch

Browse Source
This commit is contained in:
Usman Baig
2026-03-23 21:04:31 +01:00
parent 3c17895d64
commit d050d32d24
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/settings/unified/UnifiedSettingsModal.tsx
View File

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