Update app.py

app.py

@@ -81,30 +81,24 @@ def html(cards, pg, total):
         padding: 0;
         font-family: Poppins, sans-serif;
         background: #f0f0f0;
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
     }
     .container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 60px; /* Add space for the bottom buttons */
-        display: flex;
-        flex-direction: column;
+        position: relative;
         width: 100%;
-        height: calc(100vh - 60px); /* Account for button height */
+        height: auto;
         box-sizing: border-box;
         padding: 10px;
-        overflow: hidden;
+        padding-bottom: 70px; /* Space for buttons */
+        overflow-y: auto;
     }
     .grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: repeat(3, 1.5fr); /* Increased row height by 50% */
         gap: 12px;
         width: 100%;
-        height: 100%; /* Use all available container height */
-        overflow: hidden;
+        margin-bottom: 60px; /* Space for buttons */
     }
     .card {
         background: #fff;
@@ -113,8 +107,8 @@ def html(cards, pg, total):
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         display: flex;
         flex-direction: column;
-        height: 100%;
-        max-height: 100%;
+        /* Each card is 50% taller */
+        height: 300px; /* Base height - will be 50% larger */
     }
     .hdr {
         padding: 8px 12px;
@@ -193,6 +187,26 @@ def html(cards, pg, total):
         color: #777;
         z-index: 101;
     }
+
+    /* 미디어 쿼리 */
+    @media (min-width: 1200px) {
+        .card {
+            height: 450px; /* 50% taller than 300px */
+        }
+    }
+    @media (min-width: 768px) and (max-width: 1199px) {
+        .card {
+            height: 400px; /* Adjusted for medium screens */
+        }
+    }
+    @media (max-width: 767px) {
+        .grid {
+            grid-template-columns: 1fr;
+        }
+        .card {
+            height: 350px; /* Adjusted for small screens */
+        }
+    }
     </style>"""
     
     h = css + """
@@ -224,14 +238,6 @@ def html(cards, pg, total):
 def build():
     _init_best()
     with gr.Blocks(title="Vibe Game Craft", css="""
-        /* Fix container sizing and prevent scrolling */
-        html, body, .gradio-container {
-            height: 100vh !important;
-            overflow: hidden !important;
-            margin: 0 !important;
-            padding: 0 !important;
-        }
-        
         footer {display: none !important;}
         
         .button-row {
@@ -256,10 +262,10 @@ def build():
             border-radius: 50px !important;
         }
         
-        /* Fix component height */
+        /* Allow scrolling in the HTML component */
         #component-0 {
-            height: calc(100vh - 60px) !important; /* Account for button row */
-            overflow: hidden !important;
+            overflow-y: auto !important;
+            height: calc(100vh - 60px) !important; 
         }
     """) as demo:
         # 상태 및 출력