Update app.py

app.py

@@ -95,10 +95,14 @@ with gr.Blocks(css="""
 #search_output {
     max-width: 400px; /* Adjusts the maximum width of the gallery container */
 }
+#search_query_input input {
+    width: 100%; /* Makes the search bar take the full width of its container */
+    max-width: 400px; /* Set the maximum width of the search bar */
+}
 #search_output img {
     width: 150px !important;  /* Adjusts the width of the images */
-    height: 150 !important;
-    margin-right: 20px;
+    height: 150px !important;
+    margin-right: 10px;
 }
 #search_output .gallery-item {
     display: flex !important;
@@ -116,7 +120,9 @@ with gr.Blocks(css="""
 
     with gr.Row():
         with gr.Column(scale=3):
-            search_query_input = gr.Textbox(label="Search YouTube", placeholder="Enter your search query here")
+            search_query_input = gr.Textbox(label="Search YouTube", 
+                                            placeholder="Enter your search query here", 
+                                            elem_id="search_query_input")  # Add elem_id to target in CSS
             search_button = gr.Button("Search")
             search_output = gr.Gallery(label="Search Results", columns=1, height="800px", elem_id="search_output")