update layout

app.py

@@ -308,7 +308,6 @@ def update_app(decision, data, current_index, history, username):
 
 newcss = """
 #query_image{
-    height: auto !important;
 }
 
 #nn_gallery {
@@ -318,6 +317,30 @@ newcss = """
 #sample_gallery {
     height: auto !important;
 }
+
+
+/* Set display to flex for the parent element */
+.svelte-parentrowclass {
+  display: flex;
+}
+
+/* Set the flex-grow property for the children elements */
+.svelte-parentrowclass > #query_image {
+  min-width: min(400px, 40%);
+  flex : 1;
+  flex-grow: 0; !important;
+  border-style: solid;
+  height: auto !important;
+}
+
+.svelte-parentrowclass > .svelte-rightcolumn {
+  flex: 2;
+  flex-grow: 0; !important;
+  min-width: min(600px, 60%);
+}
+
+
+
 """
 
 with gr.Blocks(css=newcss, theme=gr.themes.Soft()) as demo:
@@ -358,9 +381,12 @@ with gr.Blocks(css=newcss, theme=gr.themes.Soft()) as demo:
             accept_btn = gr.Button(value="Accept")
             myabe_btn = gr.Button(value="Not Sure!")
             reject_btn = gr.Button(value="Reject")
-        with gr.Row(style={"margin-top": "10px"}):
+        with gr.Row(elem_id="parent_row", elem_classes="svelte-parentrowclass"):
             query_image = gr.Image(type="pil", label="Query", elem_id="query_image")
-            with gr.Column():
+            with gr.Column(
+                elem_id="samples_col",
+                elem_classes="svelte-rightcolumn",
+            ):
                 label_plot = gr.Plot(
                     label="Is this a correct label for this image?", type="fig"
                 )
@@ -423,4 +449,5 @@ with gr.Blocks(css=newcss, theme=gr.themes.Soft()) as demo:
         ],
     )
 
+
 demo.launch(debug=True)