fixes for examples

app.py

@@ -296,15 +296,15 @@ def create_gradio_interface():
                                  height=180,width=240,
                                  label="Example 1")
                         example_button1 = gr.Button("Select Example 1", 
-                                                    size='sm')
+                                                    size='sm', elem_classes=["fit-text"])
                     
                     # Second example
-                    with gr.Column(scale=2):
+                    with gr.Column():
                         gr.Video(value=example_videos[1], 
                                 height=180,width=240,
                                  label="Example 2")
                         example_button2 = gr.Button("Select Example 2", 
-                                                    size='sm',scale=1)
+                                                    elem_classes=["fit-text"])
                 with gr.Row():
 
                     # Third example
@@ -313,7 +313,7 @@ def create_gradio_interface():
                                  height=180,width=240,
                                  label="Example 3")
                         example_button3 = gr.Button("Select Example 3",
-                                                    size='sm')
+                                                    elem_classes=["fit-text"])
                     
                     # Fourth example
                     with gr.Column():
@@ -321,7 +321,7 @@ def create_gradio_interface():
                                  height=180,width=240,
                                  label="Example 4")
                         example_button4 = gr.Button("Select Example 4",
-                                                    size='sm')
+                                                    elem_classes=["fit-text"])
 
             with gr.Column(scale=5):
                 gr.HTML(WEB_target)
@@ -429,6 +429,14 @@ CUSTOM_CSS = """
 .gradio-edit-row { gap: 10px; align-items: center; }
 .gradio-textbox-with-button { display: flex; align-items: center; }
 .gradio-textbox-with-button input { flex-grow: 1; }
+button.fit-text {
+    width: auto; /* Automatically adjusts to the text length */
+    padding: 10px 20px; /* Adjust padding for a better look */
+    font-size: 14px; /* Control font size */
+    text-align: center; /* Center the text */
+    margin: 0 auto; /* Center the button horizontally */
+    display: inline-block; /* Prevent it from stretching */
+}
 """
 
 if __name__ == "__main__":

style.css

@@ -24,3 +24,4 @@
     gap: 10px;
     align-items: center;
 }
+