Update src/App.jsx

src/App.jsx

@@ -47,9 +47,9 @@ const QRGeneratorTab = ({
     }, [qrStyles, drawQrCode, styleCanvasRefs]);
 
     return (
-        // Modified: Changed h-full to flex-grow to ensure it fills available space from parent
+        // flex-grow ensures it takes available space in the 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 flex-grow">
-            {/* Left Panel: Input and Controls - Added flex-grow to make it fill available space */}
+            {/* Left Panel: Input and Controls - flex-grow to fill vertical 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>
                 <textarea
@@ -142,11 +142,11 @@ const QRGeneratorTab = ({
                 </div>
             </div>
 
-            {/* Right Panel: Style Selection - Added h-full and flex-grow */}
-            <div className={`w-full lg:w-1/4 p-6 rounded-2xl shadow-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} ${currentThemeClasses.text} flex flex-col transform transition-all duration-500 ease-in-out h-full flex-grow`}>
+            {/* Right Panel: Style Selection - Fixed height and flex-shrink-0 for scrollbar */}
+            <div className={`w-full lg:w-1/4 p-6 rounded-2xl shadow-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} ${currentThemeClasses.text} flex flex-col transform transition-all duration-500 ease-in-out lg:h-[calc(100vh-250px)] flex-shrink-0`}>
                 <label className={`mb-4 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Choose Style:</label>
-                {/* This inner div needs to scroll if content overflows. Added h-full */}
-                <div className={`overflow-y-auto flex-grow rounded-xl p-2 ${currentThemeClasses.cardBg} custom-scrollbar h-full`}> 
+                {/* This inner div needs to scroll if content overflows. flex-grow and overflow-y-auto */}
+                <div className={`overflow-y-auto flex-grow rounded-xl p-2 ${currentThemeClasses.cardBg} custom-scrollbar`}> 
                     <div className="grid grid-cols-2 gap-4">
                         {qrStyles.map((style, index) => (
                             <div
@@ -177,7 +177,8 @@ const QRDecoderTab = ({
     currentThemeClasses
 }) => {
     return (
-        <div className={`flex flex-col p-4 md:p-6 space-y-6 h-full ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
+        // Added flex-grow to ensure it takes available vertical space
+        <div className={`flex flex-col p-4 md:p-6 space-y-6 flex-grow ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
             <div
                 className={`flex flex-col items-center justify-center p-10 border-2 border-dashed ${currentThemeClasses.glassBorder} rounded-2xl min-h-[200px] ${currentThemeClasses.glassBg} ${currentThemeClasses.text} transition-all duration-300 shadow-2xl ${currentThemeClasses.shadow} hover:scale-[1.01] hover:-translate-y-1`}
             >
@@ -227,7 +228,8 @@ const QRDecoderTab = ({
 // --- SettingsTab Component ---
 const SettingsTab = ({ currentTheme, setCurrentTheme, currentThemeClasses, themes }) => {
     return (
-        <div className={`flex flex-col p-4 md:p-6 space-y-6 h-full ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
+        // Added flex-grow to ensure it takes available vertical space
+        <div className={`flex flex-col p-4 md:p-6 space-y-6 flex-grow ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
             <div className={`p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
                 <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Select Theme:</label>
                 <select
@@ -1361,9 +1363,10 @@ 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 overflow-y-auto"> {/* Added overflow-y-auto here */}
+        // Modified: min-h-screen to allow page to grow, flex-col for vertical layout
+        <div className={`min-h-screen flex flex-col font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
+            {/* Container for header, tabs, and tab content */}
+            <div className="container mx-auto p-4 max-w-7xl flex flex-col flex-grow"> 
                 <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>
@@ -1396,8 +1399,8 @@ const App = () => {
                     </button>
                 </div>
 
-                {/* Tab Content - Added flex-grow and overflow-hidden */}
-                <div className="tab-content flex flex-col flex-grow overflow-hidden">
+                {/* Tab Content - Added flex-grow to fill remaining space */}
+                <div className="tab-content flex flex-col flex-grow">
                     {activeTab === 'generator' && (
                         <QRGeneratorTab
                             content={content}