Update app.py

app.py

@@ -211,7 +211,7 @@ body {
     border: 1px solid #3b4252;
     background-color: #2d343f;
     border-radius: 4px;
-    margin: 1px;
+    margin: 10px;
     max-width: 100%;
     box-sizing: border-box;
 }
@@ -221,7 +221,7 @@ body {
     color: #7f8184;
     border: 1px solid #3b4252;
     border-radius: 4px;
-    margin-left: 1px;
+    margin-top: 20px;
     width: 100%;
     box-sizing: border-box;
     transition: margin 0.2s ease;
@@ -248,7 +248,7 @@ body {
     padding: 10px 20px;
     background-color: #2d3d4f;
     border-top: 1px solid #5b6270;
-    max-height: 1;
+    max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease;
 }
@@ -267,17 +267,25 @@ body {
     box-sizing: border-box;
 }
 
-@media (max-width: 1024px) {
-   .gradio-container {
-        width: 100%;
-        margin: 0;
-        padding: 10px;
-    }
-   .custom_textbox,.custom_image,.custom_checkbox_group {
-        width: 100%;
-        box-sizing: border-box;
+.custom_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 10px;
+}
+
+.custom_image_grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 10px;
+    margin-top: 10px;
+}
+
+@media (max-width: 768px) {
+    .custom_grid, .custom_image_grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     }
 }
+
 """
 
 with gr.Blocks(css=custom_css) as demo: