Update app.py

app.py

@@ -631,105 +631,118 @@ footer {display: none !important;}
 
 /* MOBIL-ANPASSNINGAR - FOKUS PÅ SCROLLNING OCH KOMPAKT LAYOUT */
 @media (max-width: 768px) {
-    /* Tillåt scrollning på mobil */
-    html, body {
+    /* Aggressiv scrollning-fix för mobil iframe */
+    html {
         width: 100% !important;
         height: 100% !important;
         margin: 0 !important;
         padding: 0 !important;
-        overflow-y: auto !important; /* Viktigt: tillåt vertikal scrollning */
+        overflow: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+        -ms-overflow-style: -ms-autohiding-scrollbar !important;
+    }
+    
+    body {
+        width: 100% !important;
+        height: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow-y: auto !important;
         overflow-x: hidden !important;
         background-color: #ffffff !important;
         -webkit-overflow-scrolling: touch !important;
+        -ms-overflow-style: -ms-autohiding-scrollbar !important;
+        position: relative !important;
     }
     
     /* Gradio app ska tillåta scrollning */
     .gradio-app {
         width: 100% !important;
-        min-height: 100vh !important; /* min-height istället för height */
+        min-height: 100vh !important;
         margin: 0 !important;
         padding: 0 !important;
-        overflow-y: auto !important;
+        overflow: visible !important;
+        position: relative !important;
     }
     
-    /* Container för mobil - scrollbar layout */
+    /* Container för mobil - naturlig scroll layout */
     .gradio-container {
-        position: relative !important; /* Inte absolute - tillåt naturlig scroll */
+        position: static !important; /* Viktigt: static för naturlig scroll */
         width: 100% !important;
-        min-height: 100vh !important; /* min-height för att tillåta längre innehåll */
+        min-height: 100vh !important;
         max-width: none !important;
         margin: 0 !important;
         padding: 8px !important;
         box-shadow: none !important;
         border-radius: 0 !important;
         background-color: #ffffff !important;
-        display: flex !important;
-        flex-direction: column !important;
+        display: block !important; /* Block istället för flex för bättre scroll */
         box-sizing: border-box !important;
+        overflow: visible !important;
     }
     
     /* Minimera header-utrymme */
     .gradio-container > .gr-markdown:first-child {
-        flex-shrink: 0 !important;
+        display: block !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 */
+        margin: 0 0 4px 0 !important;
+        padding: 4px 8px !important;
         background-color: #f8f9fa !important;
         border-radius: 4px !important;
         text-align: center !important;
     }
     
-    /* Chat-gruppar kan sträcka sig */
+    /* Chat-grupper med naturlig höjd */
     .gradio-container > .gr-group {
-        flex: 1 !important;
-        display: flex !important;
-        flex-direction: column !important;
-        margin: 0 !important;
+        display: block !important;
+        margin: 4px 0 !important;
         padding: 0 !important;
-        min-height: 0 !important;
+        overflow: visible !important;
     }
     
-    /* Kompakt chatbot med mer innehåll synligt */
+    /* Chatbot med fast höjd för scroll */
     #chatbot_conversation {
-        flex: 1 !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 */
+        display: block !important;
+        height: 300px !important; /* Fast höjd istället för flex */
+        min-height: 300px !important;
+        max-height: 300px !important;
+        margin: 0 0 8px 0 !important;
+        padding: 6px !important;
         overflow-y: auto !important;
+        overflow-x: hidden !important;
         border: 1px solid #e9ecef !important;
         border-radius: 4px !important;
         background-color: #ffffff !important;
         -webkit-overflow-scrolling: touch !important;
+        -ms-overflow-style: -ms-autohiding-scrollbar !important;
     }
     
-    /* Minska utrymme i chatbot-meddelanden */
-    #chatbot_conversation .message {
-        margin: 2px 0 !important;
-        padding: 4px !important;
-    }
-    
-    /* Input och knappar - kompakta */
+    /* Input och knappar */
     .gradio-container .gr-row {
-        flex-shrink: 0 !important;
-        margin: 2px 0 !important; /* Mindre margins */
+        display: block !important;
+        margin: 4px 0 !important;
+        overflow: visible !important;
     }
     
     /* Textbox för mobil */
     .gr-textbox {
-        margin: 0 !important;
+        margin: 0 0 4px 0 !important;
+        display: block !important;
     }
     
     .gr-textbox textarea {
         font-size: 16px !important;
-        padding: 8px !important; /* Mindre padding */
+        padding: 8px !important;
         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 */
+        min-height: 38px !important;
+        max-height: 76px !important;
+        overflow-y: auto !important;
+        -webkit-overflow-scrolling: touch !important;
     }
     
     .gr-textbox textarea:focus {
@@ -737,13 +750,14 @@ footer {display: none !important;}
         outline: none !important;
     }
     
-    /* Kompakta knappar */
+    /* Knappar med block layout */
     .gr-button {
+        display: block !important;
         width: 100% !important;
-        padding: 10px 12px !important; /* Mindre padding */
-        margin: 2px 0 !important; /* Mindre margin */
+        padding: 10px 12px !important;
+        margin: 4px 0 !important;
         font-size: 14px !important;
-        min-height: 40px !important; /* Mindre höjd */
+        min-height: 40px !important;
         border-radius: 4px !important;
         box-sizing: border-box !important;
         white-space: nowrap !important;
@@ -753,21 +767,24 @@ footer {display: none !important;}
     
     /* Knapp-kolumner */
     .gradio-container .gr-column {
+        display: block !important;
         width: 100% !important;
         margin: 0 !important;
-        padding: 0 1px !important;
+        padding: 2px 0 !important;
     }
     
-    /* Kompakt support-formulär */
+    /* Support-formulär med scrolling */
     .gr-form {
-        padding: 6px !important;
-        margin: 2px 0 !important;
+        display: block !important;
+        padding: 8px !important;
+        margin: 4px 0 !important;
         border-radius: 4px !important;
         background-color: #f8f9fa !important;
+        overflow: visible !important;
     }
     
     .gr-form .gr-textbox {
-        margin: 2px 0 !important;
+        margin: 4px 0 !important;
     }
     
     .gr-form .gr-textbox input,
@@ -777,7 +794,7 @@ footer {display: none !important;}
         border-radius: 4px !important;
     }
     
-    /* Kompakt chat preview */
+    /* Chat preview med scrolling */
     .chat-preview {
         max-height: 80px !important;
         font-size: 11px !important;
@@ -789,7 +806,7 @@ footer {display: none !important;}
         -webkit-overflow-scrolling: touch !important;
     }
     
-    /* Kompakt success message */
+    /* Success message */
     .success-message {
         font-size: 14px !important;
         padding: 8px !important;
@@ -804,11 +821,6 @@ 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 kompakt för mycket små skärmar */
@@ -844,7 +856,42 @@ footer {display: none !important;}
 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">'
+    head='<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">',
+    js="""
+    function initScrollFix() {
+        // Framtvinga scrollning på mobil i iframe
+        if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+            document.body.style.overflow = 'auto';
+            document.documentElement.style.overflow = 'auto';
+            document.body.style.webkitOverflowScrolling = 'touch';
+            
+            // Skicka meddelande till parent om scrollning
+            window.addEventListener('scroll', function() {
+                if (window.parent !== window) {
+                    window.parent.postMessage({
+                        type: 'gradio-scroll',
+                        scrollTop: document.documentElement.scrollTop
+                    }, '*');
+                }
+            });
+            
+            // Lyssna på meddelanden från parent
+            window.addEventListener('message', function(event) {
+                if (event.data.type === 'scrollToTop') {
+                    document.documentElement.scrollTop = 0;
+                    document.body.scrollTop = 0;
+                }
+            });
+        }
+    }
+    
+    // Kör när sidan laddas
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initScrollFix);
+    } else {
+        initScrollFix();
+    }
+    """
 ) 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")
     
@@ -1081,5 +1128,9 @@ if __name__ == "__main__":
         share=IS_HUGGINGFACE,
         server_name="0.0.0.0" if IS_HUGGINGFACE else "127.0.0.1",
         show_error=True,
-        show_api=False
+        show_api=False,
+        height=600,       # Fast höjd för iframe
+        inbrowser=False,  # Förhindra automatisk öppning
+        favicon_path=None,
+        app_kwargs={"docs_url": None, "redoc_url": None}  # Rensa onödiga endpoints
     )