diff --git a/components/animate/AnimationEditor.tsx b/components/animate/AnimationEditor.tsx
index 9a0ce23..10afc35 100644
--- a/components/animate/AnimationEditor.tsx
+++ b/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 - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
 
         {/* Left: Settings + Properties */}
diff --git a/components/animate/ExportPanel.tsx b/components/animate/ExportPanel.tsx
index 032bc14..db6e97b 100644
--- a/components/animate/ExportPanel.tsx
+++ b/components/animate/ExportPanel.tsx
@@ -18,7 +18,7 @@ export function ExportPanel({ config }: Props) {
   const tailwind = useMemo(() => buildTailwindCSS(config), [config]);
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent pr-0.5">
       <div className="flex items-center justify-between">
         <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Export</span>
         <div className="flex glass rounded-lg p-0.5 gap-0.5">
@@ -36,8 +36,8 @@ export function ExportPanel({ config }: Props) {
           ))}
         </div>
       </div>
-      {tab === 'css' && <CodeSnippet code={css} maxHeight="13rem" />}
-      {tab === 'tailwind' && <CodeSnippet code={tailwind} maxHeight="13rem" />}
+      {tab === 'css' && <CodeSnippet code={css} />}
+      {tab === 'tailwind' && <CodeSnippet code={tailwind} />}
     </div>
   );
 }
diff --git a/components/animate/PresetLibrary.tsx b/components/animate/PresetLibrary.tsx
index 07abccd..ac74820 100644
--- a/components/animate/PresetLibrary.tsx
+++ b/components/animate/PresetLibrary.tsx
@@ -55,7 +55,7 @@ export function PresetLibrary({ onSelect }: Props) {
   const [category, setCategory] = useState<PresetCategory>(PRESET_CATEGORIES[0]);
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent pr-0.5">
       <div className="flex items-center justify-between">
         <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Presets</span>
         <div className="flex glass rounded-lg p-0.5 gap-0.5">
diff --git a/components/ascii/ASCIIConverter.tsx b/components/ascii/ASCIIConverter.tsx
index 125e804..8b1977c 100644
--- a/components/ascii/ASCIIConverter.tsx
+++ b/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 - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
         {/* Left panel: text input + font selector */}
         <div
diff --git a/components/calculate/Calculator.tsx b/components/calculate/Calculator.tsx
index 8db4e30..df34f3e 100644
--- a/components/calculate/Calculator.tsx
+++ b/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 - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
         {/* Expression panel */}
         <div
diff --git a/components/color/ColorManipulation.tsx b/components/color/ColorManipulation.tsx
index 60d9573..4bd9483 100644
--- a/components/color/ColorManipulation.tsx
+++ b/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 - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
 
         {/* Left panel: Picker + ColorInfo */}
diff --git a/components/favicon/FaviconGenerator.tsx b/components/favicon/FaviconGenerator.tsx
index c3c24c7..ad50a37 100644
--- a/components/favicon/FaviconGenerator.tsx
+++ b/components/favicon/FaviconGenerator.tsx
@@ -97,7 +97,7 @@ export function FaviconGenerator() {
       {/* ── Main layout ─────────────────────────────────────── */}
       <div
         className="grid grid-cols-1 lg:grid-cols-5 gap-4"
-        style={{ height: 'calc(100svh - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
 
         {/* Left: Setup */}
diff --git a/components/media/FileConverter.tsx b/components/media/FileConverter.tsx
index d8dac52..de0f703 100644
--- a/components/media/FileConverter.tsx
+++ b/components/media/FileConverter.tsx
@@ -203,7 +203,7 @@ export function FileConverter() {
       {/* ── Main layout ─────────────────────────────────────── */}
       <div
         className="grid grid-cols-1 lg:grid-cols-5 gap-4"
-        style={{ height: 'calc(100svh - 180px)' }}
+        style={{ height: 'calc(100svh - 120px)' }}
       >
 
         {/* Left: upload zone */}
diff --git a/components/qrcode/QRCodeGenerator.tsx b/components/qrcode/QRCodeGenerator.tsx
index aebd6fc..3d26400 100644
--- a/components/qrcode/QRCodeGenerator.tsx
+++ b/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 - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
 
         {/* Left: Input + Options */}
diff --git a/components/units/MainConverter.tsx b/components/units/MainConverter.tsx
index fd71886..2e1fa73 100644
--- a/components/units/MainConverter.tsx
+++ b/components/units/MainConverter.tsx
@@ -108,7 +108,7 @@ export default function MainConverter() {
       {/* ── Main layout ────────────────────────────────────────── */}
       <div
         className="grid grid-cols-1 lg:grid-cols-5 gap-4"
-        style={{ height: 'calc(100svh - 180px)'  }}
+        style={{ height: 'calc(100svh - 120px)'  }}
       >
 
         {/* Left panel: search + categories */}