Update app.py

mobile UI improvements

app.py

@@ -508,15 +508,15 @@ with gr.Blocks(css="style.css") as demo:
         with gr.Row().style(mobile_collapse=False) as row1:
               with gr.Column(scale=3, min_width=100):
                   with gr.Row().style(mobile_collapse=True):
-                      with gr.Column(scale=3, min_width=100):
-                              edit_concept_1 = gr.Textbox(
+                      # with gr.Column(scale=3, min_width=100):
+                            edit_concept_1 = gr.Textbox(
                                               label="Concept",
                                               show_label=True,
                                               max_lines=1, value="",
                                               placeholder="E.g.: Sunglasses",
                                           )
-                      with gr.Column(scale=2, min_width=100):
-                              dropdown1 = gr.Dropdown(label = "Edit Type", value ='custom' , choices=['custom','style', 'object', 'faces'])
+                      # with gr.Column(scale=2, min_width=100):# better mobile ui
+                            dropdown1 = gr.Dropdown(label = "Edit Type", value ='custom' , choices=['custom','style', 'object', 'faces'])
     
 
               with gr.Column(scale=1, min_width=100, visible=False):
@@ -524,29 +524,33 @@ with gr.Blocks(css="style.css") as demo:
                           label='Remove Concept?')
               
               with gr.Column(scale=1, min_width=100):
-                      add_1 = gr.Button('Add')
-                      remove_1 = gr.Button('Remove')
+                   with gr.Row().style(mobile_collapse=False): # better mobile ui
+                       with gr.Column():
+                          add_1 = gr.Button('Add')
+                          remove_1 = gr.Button('Remove')
              
     
                   # 2nd SEGA concept
         with gr.Row(visible=False).style(equal_height=True) as row2:
             with gr.Column(scale=3, min_width=100):
                 with gr.Row().style(mobile_collapse=True): #better mobile UI
-                    with gr.Column(scale=3, min_width=100):
-                              edit_concept_2 = gr.Textbox(
+                    # with gr.Column(scale=3, min_width=100):
+                            edit_concept_2 = gr.Textbox(
                                               label="Concept",
                                               show_label=True,
                                               max_lines=1,
                                               placeholder="E.g.: Realistic",
                                           )
-                    with gr.Column(scale=2, min_width=100):
-                              dropdown2 = gr.Dropdown(label = "Edit Type", value ='custom' , choices=['custom','style', 'object', 'faces'])
+                    # with gr.Column(scale=2, min_width=100):# better mobile ui
+                            dropdown2 = gr.Dropdown(label = "Edit Type", value ='custom' , choices=['custom','style', 'object', 'faces'])
 
             with gr.Column(scale=1, min_width=100, visible=False):
                       neg_guidance_2 = gr.Checkbox(
                           label='Remove Concept?')
                 
             with gr.Column(scale=1, min_width=100):
+                with gr.Row().style(mobile_collapse=False): # better mobile ui
+                    with gr.Column():
                       add_2 = gr.Button('Add')
                       remove_2 = gr.Button('Remove')
     
@@ -554,22 +558,25 @@ with gr.Blocks(css="style.css") as demo:
         with gr.Row(visible=False).style(equal_height=True) as row3:
             with gr.Column(scale=3, min_width=100):
                 with gr.Row().style(mobile_collapse=True): #better mobile UI  
-                    with gr.Column(scale=3, min_width=100):
-                             edit_concept_3 = gr.Textbox(
+                    # with gr.Column(scale=3, min_width=100):
+                            edit_concept_3 = gr.Textbox(
                                               label="Concept",
                                               show_label=True,
                                               max_lines=1,
                                               placeholder="E.g.: orange",
                                           )
-                    with gr.Column(scale=2, min_width=100):
-                             dropdown3 = gr.Dropdown(label = "Edit Type", value ='custom' , choices=['custom','style', 'object', 'faces'])
+                    # with gr.Column(scale=2, min_width=100):
+                            dropdown3 = gr.Dropdown(label = "Edit Type", value ='custom' , choices=['custom','style', 'object', 'faces'])
             
             with gr.Column(scale=1, min_width=100, visible=False):
                              neg_guidance_3 = gr.Checkbox(
                               label='Remove Concept?',visible=True)
+            
             with gr.Column(scale=1, min_width=100):
-                     add_3 = gr.Button('Add')
-                     remove_3 = gr.Button('Remove')
+                with gr.Row().style(mobile_collapse=False): # better mobile ui
+                    with gr.Column():
+                         add_3 = gr.Button('Add')
+                         remove_3 = gr.Button('Remove')
     
         with gr.Row(visible=False).style(equal_height=True) as row4:
             gr.Markdown("### Max of 3 concepts reached. Remove a concept to add more")