CodeSandBox/judge4c
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(app)/layout.tsx
View File

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

4
src/app/(app)/playground/@description/layout.tsx
View File

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

4
src/app/(app)/playground/@workspace/layout.tsx
View File

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

6
src/app/layout.tsx
View File

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

2
src/components/code-editor.tsx
View File

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

2
src/components/mdx-preview.tsx
View File

@ -109,7 +109,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
}
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">
<MDXRemote {...mdxSource!} components={components} />
</div>