fix(layout): adjust height calculations for improved layout consistency

This commit is contained in:
cfngc4594 2025-02-23 20:31:28 +08:00
parent b5fcb39037
commit 88be7cbf58
6 changed files with 11 additions and 11 deletions

View File

@ -6,9 +6,9 @@ interface AppLayoutProps {
export default function AppLayout({ children }: AppLayoutProps) { export default function AppLayout({ children }: AppLayoutProps) {
return ( return (
<div className="flex flex-1 flex-col"> <div className="h-screen flex flex-col">
<Banner /> <Banner />
<main className="flex flex-1 flex-col"> <main className="flex flex-1 min-h-0">
{children} {children}
</main> </main>
</div> </div>

View File

@ -8,7 +8,7 @@ interface DescriptionLayoutProps {
export default function DescriptionLayout({ children }: DescriptionLayoutProps) { export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
return ( return (
<Tabs defaultValue="description" className="h-full"> <Tabs defaultValue="description">
<ScrollArea className="h-11 flex items-center pt-1 px-1"> <ScrollArea className="h-11 flex items-center pt-1 px-1">
<TabsList className="gap-1 bg-transparent"> <TabsList className="gap-1 bg-transparent">
<TabsTrigger <TabsTrigger
@ -25,7 +25,7 @@ export default function DescriptionLayout({ children }: DescriptionLayoutProps)
</TabsList> </TabsList>
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
<TabsContent value="description" className="h-full mt-0 border-t"> <TabsContent value="description" className="mt-0 border-t">
{children} {children}
</TabsContent> </TabsContent>
</Tabs> </Tabs>

View File

@ -8,7 +8,7 @@ interface WorkspaceLayoutProps {
export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) { export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
return ( return (
<Tabs defaultValue="code" className="h-full"> <Tabs defaultValue="code">
<ScrollArea className="h-11 flex items-center pt-1 px-1"> <ScrollArea className="h-11 flex items-center pt-1 px-1">
<TabsList className="gap-1 bg-transparent"> <TabsList className="gap-1 bg-transparent">
<TabsTrigger <TabsTrigger
@ -25,7 +25,7 @@ export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
</TabsList> </TabsList>
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
<TabsContent value="code" className="h-full mt-0 border-t"> <TabsContent value="code" className="mt-0 border-t">
{children} {children}
</TabsContent> </TabsContent>
</Tabs> </Tabs>

View File

@ -13,15 +13,15 @@ interface RootLayoutProps {
export default function RootLayout({ children }: RootLayoutProps) { export default function RootLayout({ children }: RootLayoutProps) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" className="h-full" suppressHydrationWarning>
<body className="min-h-svh antialiased"> <body className="flex min-h-full antialiased">
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<div className="relative flex min-h-svh flex-col"> <div className="w-full">
{children} {children}
</div> </div>
</ThemeProvider> </ThemeProvider>

View File

@ -102,7 +102,7 @@ export default function CodeEditor() {
defaultValue={DEFAULT_VALUE[language]} defaultValue={DEFAULT_VALUE[language]}
path={DEFAULT_PATH[language]} path={DEFAULT_PATH[language]}
theme={resolvedTheme === "light" ? "github-light-default" : "github-dark-default"} theme={resolvedTheme === "light" ? "github-light-default" : "github-dark-default"}
className="h-[calc(100vh-56px)]" className="h-[calc(100vh-112px)]"
options={mergeOptions} options={mergeOptions}
beforeMount={(monaco) => { beforeMount={(monaco) => {
shikiToMonaco(highlighter, monaco); shikiToMonaco(highlighter, monaco);

View File

@ -109,7 +109,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
} }
return ( return (
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]"> <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-112px)]">
<div className="markdown-body"> <div className="markdown-body">
<MDXRemote {...mdxSource!} components={components} /> <MDXRemote {...mdxSource!} components={components} />
</div> </div>