Update app.py

app.py

@@ -844,6 +844,30 @@ custom_css = """
 body {background-color: #f7f7f7; font-family: Arial, sans-serif; margin: 0; padding: 0;}
 h1 {font-family: Helvetica, sans-serif; color: #2a9d8f; text-align: center; margin-bottom: 0.5em;}
 .gradio-container {max-width: 400px; margin: 0; padding: 10px; position: fixed; bottom: 20px; right: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: #fff;}
+
+
+
+/* För mobila enheter */
+@media (max-width: 768px) {
+    .gradio-container {
+        position: static; /* Ta bort fixed för små skärmar */
+        width: 100%;
+        max-width: none;
+        margin: 0;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    #chatbot_conversation {
+        max-height: 60vh; /* Anpassa höjd */
+    }
+
+    .gr-button {
+        width: 100%; /* Gör knappar fullbredd */
+    }
+}
+
+
 #chatbot_conversation { max-height: 300px; overflow-y: auto; }
 .gr-button {background-color: #2a9d8f; color: #fff; border: none; border-radius: 4px; padding: 8px 16px; margin: 5px;}
 .gr-button:hover {background-color: #264653;}
@@ -861,7 +885,7 @@ footer {display: none !important;}
 .gradio-container .gr-footer {display: none !important;}
 """
 
-with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
+with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst", theme="default", responsive=True) as app:
     gr.Markdown("Ställ din fråga om ChargeNodes produkter och tjänster nedan. Om du inte gillar botten, så ring oss gärna på 010 – 205 10 55")
     
     with gr.Group(visible=True) as chat_interface:
@@ -869,7 +893,7 @@ with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
         chatbot.like(vote, None, None)
         
         with gr.Row():
-            msg = gr.Textbox(label="Meddelande", placeholder="Ange din fråga...")
+            msg = gr.Textbox(label="Meddelande", placeholder="Ange din fråga...", scale=12)
         
         with gr.Row():
             with gr.Column(scale=1):