add footer and fix layout

src/App.tsx

@@ -11,6 +11,7 @@ import ImageClassification from './components/pipelines/ImageClassification'
 import Sidebar from './components/Sidebar'
 import ModelReadme from './components/ModelReadme'
 import { PipelineLayout } from './components/PipelineLayout'
+import Footer from './Footer'
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
@@ -39,7 +40,7 @@ function App() {
     <div className="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Header />
       <PipelineLayout>
-        <div className=" flex h-[calc(100vh-4rem)]">
+        <div className=" flex h-[calc(100vh-8rem)]">
           {/* Header is h-16 = 4rem */}
           {/* Main Content */}
           <main className="flex-1 overflow-auto">
@@ -76,6 +77,7 @@ function App() {
           />
         </div>
       </PipelineLayout>
+      <Footer />
       {modelInfo?.readme && (
         <ModelReadme
           readme={modelInfo.readme}

src/Footer.tsx

@@ -1,9 +1,19 @@
 function Footer() {
   return (
-    <footer className="bg-white border-t mt-12">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-4 text-sm text-gray-500">
+    <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">
+        <div className="flex flex-row items-center space-x-2 text-sm text-gray-500">
+          <a
+            href="https://vnavarro.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-lg tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 "
+          >
+            vnavarro.dev
+          </a>
+          {/* vertical inline */}
+          <div className="w-[1px] h-4 bg-gray-500" />
+          <div className="flex flex-row space-x-2">
             <span>Powered by</span>
             <a
               href="https://huggingface.co/docs/transformers.js"
@@ -14,13 +24,10 @@ function Footer() {
               <span>🤗 Transformers.js</span>
             </a>
           </div>
-          <div className="text-sm text-gray-500">
-            All processing happens in your browser - your data stays private
-          </div>
         </div>
       </div>
     </footer>
-  );
+  )
 }
 
-export default Footer;
+export default Footer

src/components/Sidebar.tsx

@@ -50,13 +50,13 @@ const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
           </div>
 
           {/* Content */}
-          <div className="flex-1 overflow-y-auto p-4 space-y-6">
+          <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
             {/* Pipeline Selection */}
-            <div className="space-y-3 flex flex-row items-center space-x-4 text-center">
-              <h3 className="text-md xl:text-lg font-semibold text-gray-900 w-2/5 mt-2">
+            <div className="space-y-3">
+              <h3 className="text-md xl:text-lg font-semibold text-gray-900 mb-2">
                 Choose a Pipeline
               </h3>
-              <div className="w-3/5">
+              <div className="w-full">
                 <PipelineSelector
                   pipeline={pipeline}
                   setPipeline={setPipeline}
@@ -76,12 +76,12 @@ const Sidebar = ({ isOpen, onClose, setIsModalOpen }: SidebarProps) => {
             <div className="flex flex-col items-center justify-center">
               <ModelInfo />
               {/* Model README Button */}
-              <div className="mt-4 w-42">
+              <div className="mt-4 w-full max-w-44 mx-auto">
                 <button
                   onClick={() => setIsModalOpen(true)}
-                  className="flex items-center w-44 px-3 py-2 text-sm text-gray-600 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
+                  className="flex items-center w-full px-3 py-2 text-sm text-gray-600 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
                 >
-                  <FileText className="w-4 h-4 mr-2 shrink-0" />
+                  <FileText className="w-4 h-4 mr-2 flex-shrink-0" />
                   <span className="truncate">View README.md</span>
                 </button>
               </div>

src/components/pipelines/ImageClassification.tsx

@@ -185,7 +185,7 @@ function ImageClassification() {
   const busy = status !== 'ready' || isClassifying
 
   return (
-    <div className="flex flex-col h-full max-h-[92vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[88vh] 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

@@ -80,10 +80,8 @@ function TextClassification() {
   }
 
   return (
-    <div className="flex flex-col h-full max-h-[92vh] w-full p-4">
-      <h1 className="text-2xl font-bold mb-4 shrink-0">
-        Text Classification
-      </h1>
+    <div className="flex flex-col h-full max-h-[88vh] 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">
         {/* Input Section */}

src/components/pipelines/TextGeneration.tsx

@@ -153,7 +153,7 @@ function TextGeneration() {
   const hasChatTemplate = modelInfo?.hasChatTemplate
 
   return (
-    <div className="flex flex-col min-h-[70vh] h-full max-h-[92vh] w-full p-4">
+    <div className="flex flex-col min-h-[70vh] h-full max-h-[88vh] 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-[92vh] w-full p-4">
+    <div className="flex flex-col h-full max-h-[88vh] w-full p-4">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Zero-Shot Classification</h1>
       </div>