improve layout

src/App.tsx

@@ -39,11 +39,10 @@ function App() {
   }, [setModels, setModelInfo, setIsFetching, pipeline])
 
   return (
-    <div className="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div className="relative min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-indigo-100">
       <Header />
       <PipelineLayout>
-        <div className=" flex h-[calc(100vh-8rem)]">
-          {/* Header is h-16 = 4rem */}
+        <div className=" flex h-[calc(100vh-6.6rem)]">
           {/* Main Content */}
           <main className="flex-1 overflow-auto">
             <div className="h-full px-4 sm:px-6 lg:px-8 py-2 lg:pr-4 max-w-none">

src/Footer.tsx

@@ -1,7 +1,7 @@
 function Footer() {
   return (
-    <footer className="bg-white w-full">
-      <div className="max-w-7xl flex flex-col items-center justify-center text-center px-4 sm:px-6 lg:px-8 py-4 mx-auto h-16">
+    <footer className="bg-white w-full mt-auto">
+      <div className="max-w-7xl flex flex-col items-center justify-center text-center px-4 sm:px-6 lg:px-8 py-4 mx-auto h-10">
         <div className="flex flex-row items-center space-x-2 text-sm text-gray-500">
           {/*<a
             href="https://vnavarro.dev"

src/Header.tsx

@@ -2,20 +2,20 @@ function Header() {
   return (
     <header className="bg-white shadow-xs border-b">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-center h-16">
+        <div className="flex items-center justify-center h-10 lg:h-16">
           <div className="flex items-center space-x-3">
             <div className="w-12 h-12 flex items-center justify-center">
               <img
                 src="/hf-logo.svg"
                 alt="Hugging Face"
-                className="w-12 h-12"
+                className="w-10 h-10 lg:w-12 lg:h-12"
               />
             </div>
             <div>
               <h1 className="text-xl font-bold text-gray-900">
                 Transformers.js Playground
               </h1>
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-gray-500 hidden lg:block">
                 Run Hugging Face models in your browser
               </p>
             </div>

src/components/pipelines/FeatureExtraction.tsx

@@ -258,7 +258,7 @@ function FeatureExtraction() {
   const busy = status !== 'ready' || isExtracting
 
   return (
-    <div className="flex flex-col max-h-[calc(100dvh-148px)] w-full p-4">
+    <div className="flex flex-col max-h-[calc(100dvh-128px)] w-full p-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
         <h1 className="text-xl sm:text-2xl font-bold">
           Feature Extraction (Embeddings)

src/components/pipelines/ImageClassification.tsx

@@ -184,7 +184,7 @@ function ImageClassification() {
   const busy = status !== 'ready' || isClassifying
 
   return (
-    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)]  w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-128px)]  w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Image Classification</h1>
         <div className="flex gap-2">

src/components/pipelines/TextClassification.tsx

@@ -87,7 +87,7 @@ function TextClassification() {
   }
 
   return (
-    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)] w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-128px)] w-full p-4">
       <h1 className="text-2xl font-bold mb-4 shrink-0">Text Classification</h1>
 
       <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0 overflow-hidden">

src/components/pipelines/TextGeneration.tsx

@@ -145,7 +145,7 @@ function TextGeneration() {
   const hasChatTemplate = modelInfo?.hasChatTemplate
 
   return (
-    <div className="flex flex-col min-h-[30dvh] max-h-[calc(100dvh-148px)] w-full p-4">
+    <div className="flex flex-col min-h-[30dvh] max-h-[calc(100dvh-128px)] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">
           Text Generation {hasChatTemplate ? '(Chat)' : ''}

src/components/pipelines/ZeroShotClassification.tsx

@@ -81,7 +81,7 @@ function ZeroShotClassification() {
   const busy: boolean = status !== 'ready'
 
   return (
-    <div className="flex flex-col h-full max-h-[calc(100dvh-148px)]  w-full p-4">
+    <div className="flex flex-col h-full max-h-[calc(100dvh-128px)]  w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Zero-Shot Classification</h1>
       </div>