Update src/App.jsx

src/App.jsx

@@ -47,8 +47,8 @@ const QRGeneratorTab = ({
     }, [qrStyles, drawQrCode, styleCanvasRefs]);
 
     return (
-        // Modified: Ensure this component takes full height within its parent (tab-content)
-        <div className="flex flex-col lg:flex-row p-4 md:p-6 space-y-6 lg:space-y-0 lg:space-x-6 h-full">
+        // Modified: Changed h-full to flex-grow to ensure it fills available space from parent
+        <div className="flex flex-col lg:flex-row p-4 md:p-6 space-y-6 lg:space-y-0 lg:space-x-6 flex-grow">
             {/* Left Panel: Input and Controls - Added flex-grow to make it fill available space */}
             <div className={`flex flex-col w-full lg:w-3/4 p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out flex-grow`}>
                 <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Enter Content:</label>
@@ -1363,7 +1363,7 @@ const App = () => {
     return (
         // Modified: Set height to 100vh and added flex-col to enable vertical flex layout
         <div className={`h-screen flex flex-col font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
-            <div className="container mx-auto p-4 max-w-7xl flex flex-col flex-grow"> {/* Added flex-col and flex-grow */}
+            <div className="container mx-auto p-4 max-w-7xl flex flex-col flex-grow overflow-y-auto"> {/* Added overflow-y-auto here */}
                 <h1 className={`text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent ${currentThemeClasses.headerGlow} font-orbitron`}>
                     QuantumQR Studio
                 </h1>