positioning adjustments

app.py

@@ -7,10 +7,10 @@ theme = gr.themes.Monochrome()
 css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen&display=swap);.gradio-container{" \
       "background-color:#cda678;font-family:Silkscreen;position:relative}#component-1{min-height:75vh}#component-4{" \
       "margin-top:auto}.tabs.svelte-btpldm{height:100%}.tabitem{background-color:#000}.secondary.svelte-58yet2{" \
-      "background-color:#002366}#component-48,#component-51{" \
-      "position:absolute;background-color:#fff;left:50%;top:50%;transform:translateX(-50%) translateY(" \
-      "-50%);width:50%;height:50vh;padding:70px 20px 20px}#component-50,#component-62{" \
-      "position:absolute;top:5%;right:5%;min-width:44px;min-height:44px}"
+      "background-color:#002366}#component-48,#component-51{position:absolute;left:50%;top:50%;transform:translateX(" \
+      "-50%) translateY(-50%);width:50%;height:50vh;padding:70px 20px 20px;background-color:#fff;border:1px solid " \
+      "#002366}#component-49{position:initial}#component-50,#component-62{" \
+      "position:absolute;top:5%;right:5%;width:44px;height:44px;min-width:44px;min-height:44px}"
 
 with gr.Blocks(theme=theme, css=css) as iface:
     chatbot = []

style.css

@@ -28,19 +28,26 @@
 
 #component-48, #component-51 {
     position: absolute;
-    background-color: #fff;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     width: 50%;
     height: 50vh;
     padding: 70px 20px 20px;
+    background-color: #fff;
+    border: 1px solid #002366;
+}
+
+#component-49 {
+    position: initial;
 }
 
 #component-50, #component-62 {
     position: absolute;
     top: 5%;
     right: 5%;
+    width: 44px;
+    height: 44px;
     min-width: 44px;
     min-height: 44px;
 }