Update app.py

app.py

@@ -272,47 +272,73 @@ def auto_refresh_from_dir(
 def build_app() -> gr.Blocks:
     row_css = """
     /* Force light theme everywhere */
-    body {
+    body, .gradio-container {
         background-color: #f5f7fa !important;
+        color: #24292e !important;
     }
+
+    /* --------------------------------------
+       FIXED SEARCH BOX CSS STARTS HERE 
+       --------------------------------------
+    */
     
-    .gradio-container {
-        max-width: 100% !important;
-        padding: 20px !important;
-        background-color: #f5f7fa !important;
+    /* The outer Group container */
+    .search-box {
+        background: white !important;
+        padding: 16px !important;
+        border-radius: 6px;
+        border: 2px solid #e1e4e8 !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        margin-bottom: 16px;
     }
-    
-    /* Override all dark backgrounds */
+
+    /* Reset the internal Gradio Block styles so they fit in the white box */
+    .search-box .block {
+        background: transparent !important;
+        border: none !important;
+        padding: 0 !important;
+    }
+
+    /* Style the Label Text (🔍 Search) */
+    .search-box label span {
+        color: #24292e !important;
+        font-weight: 600;
+        font-size: 14px;
+        margin-bottom: 8px;
+        background: transparent !important;
+    }
+
+    /* Style the actual Input Field */
+    .search-box input.scroll-hide {
+        background-color: white !important;
+        color: #24292e !important;
+        border: 1.5px solid #e1e4e8 !important;
+        border-radius: 4px !important;
+        padding: 10px !important;
+        box-shadow: none !important;
+    }
+
+    /* Fix focus state */
+    .search-box input.scroll-hide:focus {
+        border-color: #0366d6 !important;
+        ring: 0 !important;
+        outline: none !important;
+    }
+
+    /* --------------------------------------
+       END FIXED SEARCH BOX CSS
+       --------------------------------------
+    */
+
+    /* Override all dark backgrounds (Global) */
     .gradio-container .block,
     .gradio-container .form,
     .gradio-container fieldset,
     .gradio-container .input-block,
     .gradio-container .wrap,
     .gradio-container .gr-box,
-    .gradio-container .gr-form,
-    .gradio-container .gr-input {
+    .gradio-container .gr-form {
         background-color: white !important;
-        border-color: #e1e4e8 !important;
-    }
-    
-    .gradio-container label {
-        background-color: transparent !important;
-        color: #24292e !important;
-    }
-    
-    /* Remove any potential dark wrappers */
-    .gradio-container > div,
-    .gradio-container .container {
-        background-color: transparent !important;
-    }
-    
-    /* Force all text to be dark */
-    .gradio-container,
-    .gradio-container label,
-    .gradio-container p,
-    .gradio-container span,
-    .gradio-container div {
-        color: #24292e !important;
     }
     
     /* Table styling */
@@ -371,54 +397,6 @@ def build_app() -> gr.Blocks:
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
     
-    /* Search box styling */
-    .search-box {
-        background: white !important;
-        padding: 16px !important;
-        border-radius: 6px;
-        border: 2px solid #e1e4e8 !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-        margin-bottom: 16px;
-    }
-    
-    .search-box * {
-        color: #24292e !important;
-    }
-    
-    .search-box .wrap,
-    .search-box .block,
-    .search-box .container,
-    .search-box .group,
-    .search-box fieldset,
-    .search-box > div,
-    .search-box > div > div {
-        background: transparent !important;
-        padding: 0 !important;
-        border: none !important;
-    }
-    
-    .search-box input {
-        background: white !important;
-        color: #24292e !important;
-        border: 1.5px solid #e1e4e8 !important;
-        border-radius: 4px !important;
-    }
-    
-    .search-box input::placeholder {
-        color: #6a737d !important;
-    }
-    
-    .search-box label {
-        background: transparent !important;
-        color: #24292e !important;
-        padding: 0 0 8px 0 !important;
-    }
-    
-    .search-box span {
-        background: transparent !important;
-        color: #24292e !important;
-    }
-    
     /* Filter section styling */
     .filter-section {
         background: white !important;
@@ -432,15 +410,6 @@ def build_app() -> gr.Blocks:
         color: #24292e !important;
     }
     
-    .filter-section .wrap,
-    .filter-section .block,
-    .filter-section .container,
-    .filter-section .group,
-    .filter-section > div,
-    .filter-section > div > div {
-        background: transparent !important;
-    }
-    
     .filter-section .wrap {
         padding: 20px !important;
     }
@@ -463,16 +432,9 @@ def build_app() -> gr.Blocks:
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
     
-    .gradio-container .accordion * {
-        color: #24292e !important;
-    }
-    
-    .gradio-container .accordion label {
-        background: transparent !important;
-        color: #24292e !important;
-    }
-    
-    .gradio-container .accordion button {
+    .gradio-container .accordion label,
+    .gradio-container .accordion button,
+    .gradio-container .accordion span {
         background: transparent !important;
         color: #24292e !important;
     }
@@ -483,12 +445,6 @@ def build_app() -> gr.Blocks:
         background: white !important;
     }
     
-    /* Make text in info section dark */
-    .info-section p,
-    .info-section li,
-    .info-section ul,
-    .info-section h3,
-    .info-section strong,
     .info-section * {
         color: #24292e !important;
     }
@@ -497,26 +453,6 @@ def build_app() -> gr.Blocks:
         color: #0366d6 !important;
     }
     
-    /* Override any dark backgrounds in groups and accordions */
-    .gradio-container .group, 
-    .gradio-container .accordion,
-    .gradio-container .panel {
-        background-color: white !important;
-    }
-    
-    /* Heading styling */
-    .gradio-container h1 {
-        color: #24292e !important;
-        font-weight: 700;
-        margin-bottom: 24px;
-    }
-    
-    .gradio-container h3 {
-        color: #24292e !important;
-        font-weight: 600;
-        margin-bottom: 16px;
-    }
-    
     /* Checkbox styling */
     .gradio-container input[type="checkbox"] {
         accent-color: #0366d6 !important;