Update app.py

app.py

@@ -605,7 +605,7 @@ except Exception as e:
 # --- Gradio UI ---
 initial_chat = [{"role": "assistant", "content": "Detta är ChargeNode's AI bot. Hur kan jag hjälpa dig idag?"}]
 
-# BEHÅLL DESKTOP LAYOUT - LÄGG TILL BARA MOBIL-ANPASSNINGAR
+# BEHÅLL DESKTOP LAYOUT - FIXA MOBIL-SCROLLING OCH LAYOUT
 custom_css = """
 /* DESKTOP LAYOUT - BEHÅLLS EXAKT SOM URSPRUNGLIG */
 body {background-color: #f7f7f7; font-family: Arial, sans-serif; margin: 0; padding: 0;}
@@ -629,36 +629,34 @@ footer {display: none !important;}
 .gradio-container .footer {display: none !important;}
 .gradio-container .gr-footer {display: none !important;}
 
-/* MOBIL-ANPASSNINGAR FÖR IFRAME-MILJÖ */
+/* MOBIL-ANPASSNINGAR - FOKUS PÅ SCROLLNING OCH KOMPAKT LAYOUT */
 @media (max-width: 768px) {
-    /* Grundläggande reset för mobil iframe */
+    /* Tillåt scrollning på mobil */
     html, body {
         width: 100% !important;
         height: 100% !important;
         margin: 0 !important;
         padding: 0 !important;
-        overflow: hidden !important;
+        overflow-y: auto !important; /* Viktigt: tillåt vertikal scrollning */
+        overflow-x: hidden !important;
         background-color: #ffffff !important;
         -webkit-overflow-scrolling: touch !important;
     }
     
-    /* Gradio app root */
+    /* Gradio app ska tillåta scrollning */
     .gradio-app {
         width: 100% !important;
-        height: 100% !important;
+        min-height: 100vh !important; /* min-height istället för height */
         margin: 0 !important;
         padding: 0 !important;
+        overflow-y: auto !important;
     }
     
-    /* Huvudcontainer för mobil */
+    /* Container för mobil - scrollbar layout */
     .gradio-container {
-        position: absolute !important;
-        top: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        bottom: 0 !important;
+        position: relative !important; /* Inte absolute - tillåt naturlig scroll */
         width: 100% !important;
-        height: 100% !important;
+        min-height: 100vh !important; /* min-height för att tillåta längre innehåll */
         max-width: none !important;
         margin: 0 !important;
         padding: 8px !important;
@@ -670,46 +668,52 @@ footer {display: none !important;}
         box-sizing: border-box !important;
     }
     
-    /* Markdown header för mobil */
+    /* Minimera header-utrymme */
     .gradio-container > .gr-markdown:first-child {
         flex-shrink: 0 !important;
-        font-size: 13px !important;
-        line-height: 1.3 !important;
-        margin: 0 0 8px 0 !important;
-        padding: 8px !important;
+        font-size: 12px !important;
+        line-height: 1.2 !important;
+        margin: 0 0 4px 0 !important; /* Mycket mindre margin */
+        padding: 4px 8px !important; /* Mindre padding */
         background-color: #f8f9fa !important;
-        border-radius: 6px !important;
+        border-radius: 4px !important;
         text-align: center !important;
     }
     
-    /* Gruppcontainers */
+    /* Chat-gruppar kan sträcka sig */
     .gradio-container > .gr-group {
         flex: 1 !important;
         display: flex !important;
         flex-direction: column !important;
-        overflow: hidden !important;
         margin: 0 !important;
         padding: 0 !important;
+        min-height: 0 !important;
     }
     
-    /* Chatbot för mobil */
+    /* Kompakt chatbot med mer innehåll synligt */
     #chatbot_conversation {
         flex: 1 !important;
-        min-height: 0 !important;
-        max-height: none !important;
-        margin: 0 0 8px 0 !important;
-        padding: 8px !important;
+        min-height: 280px !important; /* Större min-höjd så första meddelandet syns bättre */
+        max-height: 400px !important; /* Begränsa så input syns */
+        margin: 0 0 4px 0 !important; /* Minimal margin */
+        padding: 6px !important; /* Mindre padding */
         overflow-y: auto !important;
         border: 1px solid #e9ecef !important;
-        border-radius: 6px !important;
+        border-radius: 4px !important;
         background-color: #ffffff !important;
         -webkit-overflow-scrolling: touch !important;
     }
     
-    /* Input och knappar container */
+    /* Minska utrymme i chatbot-meddelanden */
+    #chatbot_conversation .message {
+        margin: 2px 0 !important;
+        padding: 4px !important;
+    }
+    
+    /* Input och knappar - kompakta */
     .gradio-container .gr-row {
         flex-shrink: 0 !important;
-        margin: 4px 0 !important;
+        margin: 2px 0 !important; /* Mindre margins */
     }
     
     /* Textbox för mobil */
@@ -719,12 +723,13 @@ footer {display: none !important;}
     
     .gr-textbox textarea {
         font-size: 16px !important;
-        padding: 12px !important;
-        border: 2px solid #e9ecef !important;
-        border-radius: 6px !important;
+        padding: 8px !important; /* Mindre padding */
+        border: 1px solid #e9ecef !important;
+        border-radius: 4px !important;
         resize: none !important;
         width: 100% !important;
         box-sizing: border-box !important;
+        min-height: 38px !important; /* Mindre höjd */
     }
     
     .gr-textbox textarea:focus {
@@ -732,66 +737,66 @@ footer {display: none !important;}
         outline: none !important;
     }
     
-    /* Knappar för mobil */
+    /* Kompakta knappar */
     .gr-button {
         width: 100% !important;
-        padding: 14px 16px !important;
-        margin: 4px 0 !important;
-        font-size: 15px !important;
-        min-height: 48px !important;
-        border-radius: 6px !important;
+        padding: 10px 12px !important; /* Mindre padding */
+        margin: 2px 0 !important; /* Mindre margin */
+        font-size: 14px !important;
+        min-height: 40px !important; /* Mindre höjd */
+        border-radius: 4px !important;
         box-sizing: border-box !important;
         white-space: nowrap !important;
         overflow: hidden !important;
         text-overflow: ellipsis !important;
     }
     
-    /* Knapp-rader för mobil */
+    /* Knapp-kolumner */
     .gradio-container .gr-column {
         width: 100% !important;
         margin: 0 !important;
-        padding: 0 2px !important;
+        padding: 0 1px !important;
     }
     
-    /* Support-formulär anpassning */
+    /* Kompakt support-formulär */
     .gr-form {
-        padding: 8px !important;
-        margin: 4px 0 !important;
-        border-radius: 6px !important;
+        padding: 6px !important;
+        margin: 2px 0 !important;
+        border-radius: 4px !important;
         background-color: #f8f9fa !important;
     }
     
     .gr-form .gr-textbox {
-        margin: 4px 0 !important;
+        margin: 2px 0 !important;
     }
     
     .gr-form .gr-textbox input,
     .gr-form .gr-textbox textarea {
         font-size: 16px !important;
-        padding: 10px !important;
+        padding: 8px !important;
         border-radius: 4px !important;
     }
     
-    /* Chat preview för mobil */
+    /* Kompakt chat preview */
     .chat-preview {
-        max-height: 100px !important;
-        font-size: 12px !important;
-        padding: 8px !important;
-        margin: 8px 0 !important;
+        max-height: 80px !important;
+        font-size: 11px !important;
+        padding: 6px !important;
+        margin: 4px 0 !important;
         border-radius: 4px !important;
         background-color: #f1f3f4 !important;
         overflow-y: auto !important;
         -webkit-overflow-scrolling: touch !important;
     }
     
-    /* Success message för mobil */
+    /* Kompakt success message */
     .success-message {
-        font-size: 16px !important;
-        padding: 16px !important;
+        font-size: 14px !important;
+        padding: 8px !important;
         text-align: center !important;
-        margin: 16px 0 !important;
+        margin: 8px 0 !important;
         background-color: #d1e7dd !important;
-        border-radius: 6px !important;
+        border-radius: 4px !important;
         color: #0f5132 !important;
     }
     
@@ -799,32 +804,48 @@ footer {display: none !important;}
     input, textarea, select {
         font-size: 16px !important;
     }
+    
+    /* Se till att support-vyn börjar från toppen */
+    .gradio-container > .gr-group[style*="visible: true"] {
+        scroll-margin-top: 0 !important;
+    }
 }
 
-/* Extra anpassningar för mycket små skärmar */
+/* Extra kompakt för mycket små skärmar */
 @media (max-width: 480px) {
     .gradio-container {
-        padding: 6px !important;
+        padding: 4px !important;
     }
     
     .gradio-container > .gr-markdown:first-child {
-        font-size: 12px !important;
-        padding: 6px !important;
+        font-size: 11px !important;
+        padding: 3px 6px !important;
+        margin: 0 0 3px 0 !important;
     }
     
     #chatbot_conversation {
-        padding: 6px !important;
+        padding: 4px !important;
+        min-height: 250px !important;
     }
     
     .gr-button {
-        padding: 12px 14px !important;
-        font-size: 14px !important;
-        min-height: 44px !important;
+        padding: 8px 10px !important;
+        font-size: 13px !important;
+        min-height: 36px !important;
+    }
+    
+    .gr-textbox textarea {
+        padding: 6px !important;
+        min-height: 32px !important;
     }
 }
 """
 
-with gr.Blocks(css=custom_css, title="ChargeNode Kundtjänst") as app:
+with gr.Blocks(
+    css=custom_css, 
+    title="ChargeNode Kundtjänst",
+    head='<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">'
+) 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")
     
     # Chat interface