Refactor layout components to remove unnecessary min-height and improve responsiveness

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-ca84f546'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.tpsi5p961us"
+    "revision": "0.luqmbf7uqs"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/App.tsx

@@ -39,7 +39,7 @@ import React, { useState } from 'react';
         switch (currentPage) {
           case 'home':
             return (
-              <div className="min-h-screen bg-gray-900 text-white p-3 sm:p-6 md:pt-16 pb-16 md:pb-0 animate-fade-in">
+              <div className="bg-gray-900 text-white p-3 sm:p-6 animate-fade-in">
                 <div className="max-w-7xl mx-auto">
                   <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 animate-slide-in-left">My Decks</h1>
                   <DeckList onDeckEdit={handleDeckEdit} />
@@ -76,7 +76,7 @@ import React, { useState } from 'react';
       return (
         <div className="min-h-screen bg-gray-900">
           <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
-          {renderPage()}
+            {renderPage()}
           <PWAInstallPrompt />
         </div>
       );

src/components/CardSearch.tsx

@@ -192,7 +192,7 @@ const CardSearch = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-3 sm:p-6 md:pt-16 pb-16 md:pb-0">
+    <div className="bg-gray-900 text-white p-3 sm:p-6">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">Card Search</h1>
         <form onSubmit={handleSearch} className="mb-8 space-y-4">
@@ -219,7 +219,7 @@ const CardSearch = () => {
               className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white"
               placeholder="Rules Text (~ for card name)"
             />
-            <div className="flex gap-2">
+            <div className="flex flex-col sm:flex-row gap-2">
               <input
                 type="text"
                 value={typeLine}
@@ -313,7 +313,7 @@ const CardSearch = () => {
           </div>
 
           {/* Stats */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <select
               value={manaValueComparison}
               onChange={(e) => setManaValueComparison(e.target.value)}
@@ -354,7 +354,7 @@ const CardSearch = () => {
           </div>
 
           {/* Formats */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <select
               value={format}
               onChange={(e) => setFormat(e.target.value)}
@@ -396,7 +396,7 @@ const CardSearch = () => {
           </div>
 
           {/* Sets */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <input
               type="text"
               value={set}
@@ -432,7 +432,7 @@ const CardSearch = () => {
           </div>
 
           {/* Criteria */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <input
               type="text"
               value={criteria}
@@ -459,7 +459,7 @@ const CardSearch = () => {
           </div>
 
           {/* Prices */}
-          <div className="flex gap-2">
+          <div className="flex flex-col sm:flex-row gap-2">
             <select
               value={currency}
               onChange={(e) => setCurrency(e.target.value)}

src/components/Collection.tsx

@@ -189,7 +189,7 @@ export default function Collection() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-3 sm:p-6 md:pt-16 pb-16 md:pb-0">
+    <div className="bg-gray-900 text-white p-3 sm:p-6">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6">My Collection</h1>
 

src/components/DeckManager.tsx

@@ -490,7 +490,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
   };
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-3 sm:p-6 md:pt-16 pb-16 md:pb-0">
+    <div className="bg-gray-900 text-white p-3 sm:p-6">
       <div className="max-w-7xl mx-auto">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Card Search Section */}

src/components/Navigation.tsx

@@ -191,9 +191,6 @@ import React, { useState, useRef, useEffect } from 'react';
               </div>
             </div>
           </nav>
-
-          {/* Content Padding */}
-          <div className="md:pt-16 pb-16 md:pb-0" />
         </>
       );
     }