valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: app page layout

Browse Source
This commit is contained in:
Sebastian Krüger
2026-03-01 12:14:55 +01:00
parent dc638ac4d3
commit 2abbdf407f
9 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/animate/AnimationEditor.tsx
View File

@@ -96,7 +96,7 @@ export function AnimationEditor() {
{/* ── Main layout ─────────────────────────────────────── */} {/* ── Main layout ─────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '660px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left: Settings + Properties */} {/* Left: Settings + Properties */}

2
components/ascii/ASCIIConverter.tsx
View File

@@ -123,7 +123,7 @@ export function ASCIIConverter() {
{/* ── Main layout ────────────────────────────────────────── */} {/* ── Main layout ────────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left panel: text input + font selector */} {/* Left panel: text input + font selector */}
<div <div

2
components/calculate/Calculator.tsx
View File

@@ -34,7 +34,7 @@ export default function Calculator() {
{/* Main layout — side-by-side on lg, tabbed on mobile */} {/* Main layout — side-by-side on lg, tabbed on mobile */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Expression panel */} {/* Expression panel */}
<div <div

2
components/color/ColorManipulation.tsx
View File

@@ -123,7 +123,7 @@ function ColorManipulationContent() {
{/* ── Main layout ────────────────────────────────────────── */} {/* ── Main layout ────────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left panel: Picker + ColorInfo */} {/* Left panel: Picker + ColorInfo */}

2
components/favicon/FaviconGenerator.tsx
View File

@@ -96,7 +96,7 @@ export function FaviconGenerator() {
{/* ── Main layout ─────────────────────────────────────── */} {/* ── Main layout ─────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left: Setup */} {/* Left: Setup */}

8
components/layout/AppPage.tsx
View File

@@ -8,11 +8,9 @@ interface AppPageProps {
export function AppPage({ children, className }: AppPageProps) { export function AppPage({ children, className }: AppPageProps) {
return ( return (
<div className={cn('min-h-screen', className)}> <div className={cn('overflow-y-auto', className)}>
<div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in"> <div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in py-6 lg:py-8">
<div className="py-8"> {children}
{children}
</div>
</div> </div>
</div> </div>
); );

2
components/media/FileConverter.tsx
View File

@@ -208,7 +208,7 @@ export function FileConverter() {
{/* ── Main layout ─────────────────────────────────────── */} {/* ── Main layout ─────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left: upload zone */} {/* Left: upload zone */}

2
components/qrcode/QRCodeGenerator.tsx
View File

@@ -121,7 +121,7 @@ export function QRCodeGenerator() {
{/* ── Main layout ─────────────────────────────────────── */} {/* ── Main layout ─────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left: Input + Options */} {/* Left: Input + Options */}

2
components/units/MainConverter.tsx
View File

@@ -115,7 +115,7 @@ export default function MainConverter() {
{/* ── Main layout ────────────────────────────────────────── */} {/* ── Main layout ────────────────────────────────────────── */}
<div <div
className="grid grid-cols-1 lg:grid-cols-5 gap-4" className="grid grid-cols-1 lg:grid-cols-5 gap-4"
style={{ height: 'calc(100svh - 220px)', minHeight: '620px' }} style={{ height: 'calc(100svh - 220px)' }}
> >
{/* Left panel: search + categories */} {/* Left panel: search + categories */}