adjusting background image, minor size adjustments

app.py

@@ -7,7 +7,8 @@ openai.api_key = os.environ['KEY']
 theme = gr.themes.Monochrome(
     text_size="lg"
 )
-css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap);.gradio-container{" \
+css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap);#component-3," \
+      "#component-4{margin-bottom:10px}.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:#002366;border:1px solid " \
       "#fff}#component-17,#component-25,#component-33,#component-41,#component-9{" \
@@ -22,13 +23,14 @@ css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;
       "content:\"\";width:10px;height:10px;position:absolute;bottom:-1px;border:1px solid var(" \
       "--color-border-accent);background-color:var(--color-accent-soft)}.bot.svelte-a99nd8.svelte-a99nd8::before{" \
       "left:-10px;border-right:0}.user.svelte-a99nd8.svelte-a99nd8::after{right:-10px;border-left:0}textarea{" \
-      "background-color:#fff;height:50px!important}#component-48,#component-51{" \
+      "background-color:#fff;min-height:50px!important}#component-48,#component-51{" \
       "position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(" \
       "-50%);width:50%;height:50vh;padding:80px 20px 20px;background-color:#fff;border:1px solid " \
       "#002366}#component-49{position:initial;background-image:url(" \
-      "\"/img/map.jpg\");background-position:center;background-repeat:no-repeat;background-size:contain}#component" \
-      "-50,#component-62{position:absolute;top:20px;right:20px;width:44px;height:44px;min-width:44px;min-height:44px" \
-      "}.output-class.svelte-1s28oeb.svelte-1s28oeb.svelte-1s28oeb,div.svelte-1eq475l{font-weight:400}"
+      "\"https://huggingface.co/spaces/hslu-di/Wiesli_Jonas/resolve/main/img/map.jpg\");background-position:center" \
+      ";background-repeat:no-repeat;background-size:contain}#component-50,#component-57{" \
+      "position:absolute;top:20px;right:20px;width:44px;height:44px;min-width:44px;min-height:44px}.output-class" \
+      ".svelte-1s28oeb.svelte-1s28oeb.svelte-1s28oeb,div.svelte-1eq475l{font-weight:400}"
 
 with gr.Blocks(theme=theme, css=css) as iface:
     chatbot = []
@@ -127,7 +129,7 @@ with gr.Blocks(theme=theme, css=css) as iface:
 
     with gr.Row() as chatRow:
         with gr.Column(scale=1):
-            questionCounter = gr.Label(label="Remaining Questions", value="24")
+            questionCounter = gr.Label(label="Remaining Questions", value="4")
             mapButton = gr.Button("Show Floor Plan")
             finishButton = gr.Button("Pick a Culprit")
         with gr.Column(scale=7):

style.css

@@ -10,8 +10,13 @@
     min-height: 75vh;
 }
 
+#component-3 {
+    margin-bottom: 10px;
+}
+
 #component-4 {
     margin-top: auto;
+    margin-bottom: 10px;
 }
 
 .tabs.svelte-btpldm {
@@ -74,7 +79,7 @@
 
 textarea {
     background-color: #fff;
-    height: 50px !important;
+    min-height: 50px !important;
 }
 
 #component-48, #component-51 {
@@ -91,13 +96,13 @@ textarea {
 
 #component-49 {
     position: initial;
-    background-image: url(\"/img/map.jpg\");
+    background-image: url(\"https://huggingface.co/spaces/hslu-di/Wiesli_Jonas/resolve/main/img/map.jpg\");
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
 }
 
-#component-50, #component-62 {
+#component-50, #component-57 {
     position: absolute;
     top: 20px;
     right: 20px;