commit31

app.py

@@ -785,6 +785,7 @@ def handle_voice_search(vf_path, a, offset, gender_ui):
     seen_ids = {r[1] for r in results}
     return results, 12, transcription, None, gender_override, results, seen_ids
 
+
 custom_css = """
 /* === Global Styling === */
 /* === Override Gradio default background === */
@@ -948,19 +949,79 @@ input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
     padding-top: 1rem;
 }
 
-/* === Main Container Centered and Wide === */
+# /* === Main Container Centered and Wide === */
+# #main-container {
+#     max-width: 90%;
+#     width: 1100px;
+#     margin: 40px auto !important;
+#     padding: 24px;
+#     background: #ffffff;
+#     border-radius: 18px;
+#     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+#     border: 3px solid orange; /* Orange border */
+# }
+# #main-container {
+#     max-width: 90%;
+#     width: 1100px;
+#     height: 90vh;
+#     overflow-y: auto;
+#     padding: 24px;
+#     background: #ffffff;
+#     border-radius: 18px;
+#     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+#     border: 3px solid orange;
+#     margin: 40px auto;
+#     position: relative;
+#     display: flex;
+#     flex-direction: column;
+# }
+
 #main-container {
-    max-width: 90%;
-    width: 1100px;
-    margin: 40px auto !important;
-    padding: 24px;
+    width: 95%;
+    max-width: 1100px;
+    margin: 20px auto !important;
+    padding: 16px;
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-    border: 3px solid orange; /* Orange border */
+    border: 3px solid orange;
+    overflow-y: auto;
+    max-height: 90vh;
 }
 
+/* For phones and smaller devices */
+@media (max-width: 768px) {
+    #main-container {
+        width: 100%;
+        margin: 8px;
+        padding: 12px;
+        border-radius: 12px;
+        max-height: none;
+    }
 
+    .gr-button {
+        font-size: 14px;
+        height: 3.2rem;
+    }
+
+    input[type="text"], .gr-textbox textarea, .gr-dropdown, .gr-slider {
+        font-size: 14px;
+        padding: 8px !important;
+    }
+
+    h1, .gr-markdown h1 {
+        font-size: 1.6rem !important;
+    }
+
+    .gr-gallery-item {
+        width: 100px !important;
+        height: 100px !important;
+    }
+
+    .gr-image {
+        height: auto !important;
+    }
+}
 
 
 
@@ -1002,8 +1063,6 @@ button[role="tab"]:hover {
 """
 
 
-
-
 with gr.Blocks(css=custom_css) as demo:
   with gr.Column(elem_id="app-bg"):
     with gr.Column(elem_id="main-container"):