Update app.py

app.py

@@ -131,7 +131,7 @@ CUSTOM_CSS = """
     background: var(--background-fill-primary) !important;
 }
 
-/* Make sure search results are visible */
+/* Make sure search results are visible - comprehensive dropdown fixes */
 .gradio-container .gr-dropdown-item {
     color: var(--body-text-color) !important;
     background: var(--background-fill-primary) !important;
@@ -140,6 +140,63 @@ CUSTOM_CSS = """
 .gradio-container .gr-dropdown-item:hover {
     background: var(--background-fill-secondary) !important;
 }
+
+/* Additional fixes for HuggingfaceHubSearch dropdown results */
+.gradio-container [data-testid="dropdown"] > div,
+.gradio-container [data-testid="dropdown"] .gr-box {
+    background: var(--background-fill-primary) !important;
+    color: var(--body-text-color) !important;
+}
+
+/* Fix for search results list items */
+.gradio-container .gr-dropdown div[role="option"],
+.gradio-container .gr-dropdown .gr-dropdown-item,
+.gradio-container .gr-dropdown li {
+    background: var(--background-fill-primary) !important;
+    color: var(--body-text-color) !important;
+    border-bottom: 1px solid var(--border-color-primary) !important;
+}
+
+.gradio-container .gr-dropdown div[role="option"]:hover,
+.gradio-container .gr-dropdown .gr-dropdown-item:hover,
+.gradio-container .gr-dropdown li:hover {
+    background: var(--background-fill-secondary) !important;
+    color: var(--body-text-color) !important;
+}
+
+/* Fix for any ul/li dropdown elements */
+.gradio-container ul.gr-dropdown,
+.gradio-container .gr-dropdown ul {
+    background: var(--background-fill-primary) !important;
+    border: 1px solid var(--border-color-primary) !important;
+}
+
+/* Comprehensive fix for all dropdown text */
+.gradio-container .gr-dropdown *,
+.gradio-container [data-testid="dropdown"] *,
+.gradio-container .gr-dropdown-container * {
+    color: var(--body-text-color) !important;
+}
+
+/* Fix for HuggingfaceHubSearch specific selectors */
+.gradio-container .gradio-huggingfacehub-search .gr-dropdown,
+.gradio-container .gradio-huggingfacehub-search [data-testid="dropdown"] {
+    background: var(--background-fill-primary) !important;
+}
+
+.gradio-container .gradio-huggingfacehub-search .gr-dropdown-item,
+.gradio-container .gradio-huggingfacehub-search div[role="option"] {
+    background: var(--background-fill-primary) !important;
+    color: var(--body-text-color) !important;
+}
+
+/* Force visibility with !important for stubborn elements */
+.gradio-container .gr-dropdown .gr-dropdown-item span,
+.gradio-container .gr-dropdown div[role="option"] span,
+.gradio-container [data-testid="dropdown"] span {
+    color: var(--body-text-color) !important;
+    background: transparent !important;
+}
 """
 
 with gr.Blocks(css=CUSTOM_CSS) as demo: