fix(ui): resolve layout and theme issues in profile editor

- Fix overflow issues in main layout by removing pb-12 and adding min-h-0
- Fix code editor theme switching by adding key prop to force re-render
- Fix localhost disclaimer positioning by removing fixed positioning and redundant padding
- Simplify analytics page layout structure and adjust spacing
This commit is contained in:
kaitranntt committed 2025-12-10 22:50:01 -05:00
1 parent 8c9d669cce
commit 46ee1df083
4 files changed
+4 -5

No files matched your search

+1 -1
View File
@@ -50,7 +50,7 @@ function Layout() {
<ThemeToggle /> <ThemeToggle />
</div> </div>
</header> </header>
<div className="flex-1 overflow-auto pb-12"> <div className="flex-1 overflow-auto min-h-0">
<Suspense fallback={<PageLoader />}> <Suspense fallback={<PageLoader />}>
<Outlet /> <Outlet />
</Suspense> </Suspense>
+1
View File
@@ -126,6 +126,7 @@ export function CodeEditor({
value={value} value={value}
onValueChange={readonly ? () => {} : onChange} onValueChange={readonly ? () => {} : onChange}
highlight={highlightCode} highlight={highlightCode}
key={isDark ? 'dark' : 'light'}
padding={12} padding={12}
disabled={readonly} disabled={readonly}
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}
+1 -1
View File
@@ -7,7 +7,7 @@ export function LocalhostDisclaimer() {
if (dismissed) return null; if (dismissed) return null;
return ( return (
<div className="fixed bottom-0 left-0 right-0 bg-yellow-50 dark:bg-yellow-900/20 border-t border-yellow-200 dark:border-yellow-800 px-4 py-2 z-50 md:pl-[var(--sidebar-width)] transition-[padding] duration-200"> <div className="w-full bg-yellow-50 dark:bg-yellow-900/20 border-t border-yellow-200 dark:border-yellow-800 px-4 py-2 transition-colors duration-200">
<div className="flex items-center justify-center gap-4"> <div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2 text-sm text-yellow-800 dark:text-yellow-200"> <div className="flex items-center gap-2 text-sm text-yellow-800 dark:text-yellow-200">
<Shield className="w-4 h-4 flex-shrink-0" /> <Shield className="w-4 h-4 flex-shrink-0" />
+1 -3
View File
@@ -96,8 +96,7 @@ export function AnalyticsPage() {
}, []); }, []);
return ( return (
<div className="flex flex-col h-[calc(100vh-3rem)] overflow-hidden"> <div className="flex flex-col h-[calc(100vh-5.5rem)] overflow-hidden p-4 gap-3">
<div className="flex-1 flex flex-col min-h-0 overflow-hidden p-4 pb-14 space-y-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between shrink-0"> <div className="flex items-center justify-between shrink-0">
<div> <div>
@@ -321,7 +320,6 @@ export function AnalyticsPage() {
</Popover> </Popover>
</div> </div>
</div> </div>
</div>
); );
} }