Update demo.py

demo.py

@@ -70,18 +70,19 @@ css = """
     height: 100px;  /* Set height to 100px */
 }
 
-/* Adjust the width for the accordion and prevent layout change */
-.gradio-accordion {
-    width: 100%;  /* Full width for accordions */
-    max-height: 200px;  /* Set a maximum height */
-    overflow-y: auto;  /* Allow scroll if content exceeds max height */
-    margin-bottom: 10px;  /* Space below the accordion */
+/* Accordion Styling */
+.accordion {
+    width: 100%;  /* Set the width of the accordion to match the parent */
+    max-height: 200px;  /* Set a max-height for accordion */
+    overflow-y: auto;  /* Allow scrolling if the content exceeds max height */
+    margin-bottom: 10px;  /* Add space below accordion */
+    box-sizing: border-box;  /* Ensure padding is included in width/height */
 }
 
-/* Set the maximum height and prevent overflow for the accordion content */
-.gradio-accordion .accordion-content {
-    max-height: 200px;
-    overflow-y: auto;  /* Add vertical scrollbar if content overflows */
+/* Accordion content max-height */
+.accordion-content {
+    max-height: 200px;  /* Limit the height of the content */
+    overflow-y: auto;  /* Add a scrollbar if content overflows */
 }
 """
 
@@ -129,13 +130,13 @@ with gr.Blocks(css=css) as app:
     submit_button.click(run_test_power, inputs=[model_name, input_text, input_text], outputs=output)
     clear_button.click(lambda: ("", ""), inputs=[], outputs=[input_text, output])
 
-    with gr.Accordion("Disclaimer", open=False):
+    with gr.Accordion("Disclaimer", open=False, elem_classes=["accordion"]):
         gr.Markdown("""
         - **Disclaimer**: This tool is for demonstration purposes only. It is not a foolproof AI detector.
         - **Accuracy**: Results may vary based on input length and quality.
         """)
 
-    with gr.Accordion("Citations", open=False):
+    with gr.Accordion("Citations", open=False, elem_classes=["accordion"]):
         gr.Markdown("""
         ```
         @inproceedings{zhangs2024MMDMP,