changed css

app.py

@@ -70,9 +70,31 @@ theme = gr.themes.Soft(
 )
 
 custom_css = """
+/* Remove outer padding, margins, and borders */
+gradio-app,
+gradio-app > div,
+gradio-app .gradio-container {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+}
+
+/* Remove any potential outlines */
+gradio-app:focus,
+gradio-app > div:focus,
+gradio-app .gradio-container:focus {
+    outline: none !important;
+}
+
+/* Ensure full width */
+gradio-app {
+    width: 100% !important;
+    display: block !important;
+}
+
 .custom-markdown { 
     border: 1px solid var(--neutral-200); 
-    padding: 15px; 
+    padding: 10px; 
     border-radius: var(--radius-lg);
     background-color: var(--color-background-primary);
     margin-bottom: 15px;
@@ -81,6 +103,22 @@ custom_css = """
     margin-bottom: 10px;
     line-height: 1.6;
 }
+
+@media (max-width: 768px) {
+    gradio-app, 
+    gradio-app > div,
+    gradio-app .gradio-container {
+        padding-left: 1px !important;
+        padding-right: 1px !important;
+    }
+    .custom-markdown {
+        padding: 5px;
+    }
+    .accordion {
+        margin-left: -10px;
+        margin-right: -10px;
+    }
+}
 """
 
 with gr.Blocks(theme=theme, css=custom_css) as demo:
@@ -89,7 +127,7 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
     author_inp = gr.Dropdown(label="Autoren", choices=authors_list_de, multiselect=True)
     inp = gr.Textbox(label="Query", lines=3, placeholder="Wie kann ich gesund leben?; Wie kann ich mich besser konzentrieren?; Was ist der Sinn des Lebens?; ...")
     btn = gr.Button("Suchen")
-    loading_indicator = gr.Markdown(visible=False)
+    loading_indicator = gr.Markdown(visible=False, elem_id="loading-indicator")
     results = gr.State()
 
     #def update_authors(database):
@@ -113,7 +151,7 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
         return results_data, ""
 
     btn.click(
-        fn=lambda: ("Suche... Das kann bis zu 40 Sekunden dauern...", gr.update(visible=True)),
+        fn=lambda: ("", gr.update(visible=True)),
         inputs=None,
         outputs=[loading_indicator, loading_indicator],
         queue=False
@@ -126,7 +164,7 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
     @gr.render(inputs=[results])
     def display_accordion(data):
         for query, res in data:
-            with gr.Accordion(query, open=False) as acc:
+            with gr.Accordion(query, open=False, elem_classes="accordion") as acc:
                 for result in res:
                     with gr.Column():
                         author = str(result.get('author', ''))
@@ -149,4 +187,4 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
                         markdown_contents = f"**{header}**\n\n{text}"
                         gr.Markdown(value=markdown_contents, elem_classes="custom-markdown")
 
-demo.launch()
+demo.launch(inline=False)