Update app.py

app.py

@@ -95,10 +95,6 @@ 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 to match the gallery container */
-}
 #search_output img {
     width: 150px !important;  /* Adjusts the width of the images */
     height: 150px !important;
@@ -119,14 +115,14 @@ with gr.Blocks(css="""
     video_ids_state = gr.State()  # To store video IDs corresponding to the search results
 
     with gr.Row():
-        with gr.Column(scale=3):
+        with gr.Column(scale=1, min_width=400):  # Adjust scale and min_width for the search column
             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
+                                            elem_id="search_query_input")
             search_button = gr.Button("Search")
             search_output = gr.Gallery(label="Search Results", columns=1, height="800px", elem_id="search_output")
 
-        with gr.Column(scale=2):
+        with gr.Column(scale=1, min_width=400):
             selected_video_link = gr.Textbox(label="Selected Video Link", interactive=False)
             play_video_button = gr.Button("Play Video")
             video_output = gr.HTML(label="Video Player")