fix: app page layout

components/animate/AnimationEditor.tsx

@@ -96,7 +96,7 @@ export function AnimationEditor() {
       {/* ── Main layout ─────────────────────────────────────── */}
       <div
         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 */}

components/ascii/ASCIIConverter.tsx

@@ -123,7 +123,7 @@ export function ASCIIConverter() {
       {/* ── Main layout ────────────────────────────────────────── */}
       <div
         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 */}
         <div

components/calculate/Calculator.tsx

@@ -34,7 +34,7 @@ export default function Calculator() {
       {/* Main layout — side-by-side on lg, tabbed on mobile */}
       <div
         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 */}
         <div

components/color/ColorManipulation.tsx

@@ -123,7 +123,7 @@ function ColorManipulationContent() {
       {/* ── Main layout ────────────────────────────────────────── */}
       <div
         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 */}

components/favicon/FaviconGenerator.tsx

@@ -96,7 +96,7 @@ export function FaviconGenerator() {
       {/* ── Main layout ─────────────────────────────────────── */}
       <div
         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 */}

components/layout/AppPage.tsx

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

components/media/FileConverter.tsx

@@ -208,7 +208,7 @@ export function FileConverter() {
       {/* ── Main layout ─────────────────────────────────────── */}
       <div
         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 */}

components/qrcode/QRCodeGenerator.tsx

@@ -121,7 +121,7 @@ export function QRCodeGenerator() {
       {/* ── Main layout ─────────────────────────────────────── */}
       <div
         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 */}

components/units/MainConverter.tsx

@@ -115,7 +115,7 @@ export default function MainConverter() {
       {/* ── Main layout ────────────────────────────────────────── */}
       <div
         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 */}