again for mobile

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

app.py

@@ -16,4 +16,4 @@ if __name__ == "__main__":
 
     # Launch the Gradio app with MCP server enabled.
     # NOTE: It is required to restart the app when you add or remove MCP tools.
-    demo.launch(mcp_server=True)
+    demo.launch(mcp_server=True,share=True)

src/learnbee/theme.py

@@ -27,6 +27,18 @@ CUSTOM_CSS = """
     max-width: 1400px !important;
     margin: 0 auto !important;
     padding: 1rem !important;
+    overflow-x: hidden !important;
+    box-sizing: border-box !important;
+    width: 100% !important;
+}
+
+body, html {
+    overflow-x: hidden !important;
+}
+
+/* Prevent all children from creating horizontal scroll */
+* {
+    box-sizing: border-box;
 }
 
 /* Beautiful header - siempre visible en ambos modos */
@@ -636,6 +648,9 @@ label {
 .multilingual-footer {
     box-sizing: border-box;
     padding: 0.75rem 1rem;
+    overflow-x: hidden !important;
+    width: 100%;
+    margin: 0 !important;
 }
 
 .multilingual-row {
@@ -644,12 +659,18 @@ label {
     justify-content: center;
     gap: 0.5rem;
     flex-wrap: wrap;
+    max-width: 100%;
+    word-break: break-word;
+    overflow-wrap: break-word;
 }
 
 .multilingual-content {
     min-width: 0; /* allow flex children to shrink on small screens */
     flex: 1 1 auto;
     text-align: left;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
 }
 
 .multilingual-icon {
@@ -660,6 +681,14 @@ label {
 .multilingual-reset {
     font-size: 0.95rem;
     opacity: 0.95;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.multilingual-reset-wrap {
+    max-width: 100%;
+    word-break: break-word;
+    overflow-wrap: break-word;
 }
 
 @media (max-width: 480px) {
@@ -667,8 +696,9 @@ label {
         flex-direction: column;
         align-items: center;
         gap: 0.5rem;
+        padding: 0 0.25rem;
     }
-    .multilingual-content, .multilingual-reset {
+    .multilingual-content, .multilingual-reset-wrap {
         text-align: center;
         width: 100%;
     }
@@ -676,50 +706,13 @@ label {
         font-size: 1.05rem;
     }
     .multilingual-footer {
-        padding: 0.6rem 0.75rem;
+        padding: 0.6rem 0.5rem;
+    }
+    .multilingual-desc {
+        font-size: 0.9rem;
     }
 }
 
-/* Defensive rules to prevent horizontal overflow on small/mobile screens */
-html, body {
-    max-width: 100%;
-    overflow-x: hidden; /* hide tiny overflows while we ensure children can shrink */
-}
-
-/* Ensure consistent box-sizing and prevent children from forcing width */
-.gradio-container, .gradio-container * {
-    box-sizing: border-box;
-}
-
-/* Allow flex children to shrink so rows don't create horizontal scroll */
-.gr-row, .gr-row > div, .multilingual-row, .steps-container, .steps-container > * {
-    min-width: 0;
-}
-
-/* Make code blocks and long text wrap instead of expanding horizontally */
-.message pre, pre, code {
-    white-space: pre-wrap !important;
-    word-break: break-word !important;
-    overflow-wrap: anywhere !important;
-}
-
-/* Images should never overflow their containers */
-img {
-    max-width: 100%;
-    height: auto;
-}
-
-/* Chat container safety */
-.chat-container, .chatbot {
-    overflow-wrap: break-word;
-}
-
-/* Optional: outline any element causing overflow for debugging (uncomment when needed)
-.overflow-debug {
-    outline: 2px solid rgba(255,0,0,0.25);
-}
-*/
-
 /* Footer fine-tuning: center icon + title and unify reset text size */
 .multilingual-footer .multilingual-icon {
     font-size: 1.6rem;

src/learnbee/ui.py

@@ -334,16 +334,14 @@ def create_gradio_ui():
         # Footer: Multilingual Support (full-width)
         gr.HTML("""
             <footer class="multilingual-footer">
-                <div>
-                    <div class="multilingual-row">
-                            <span class="multilingual-icon" aria-hidden="true">🌍</span>
-                            <div class="multilingual-content">
-                                <div class="multilingual-title">Multilingual Support</div>
-                                <div class="multilingual-desc">The tutor automatically responds in your language. Chat in Spanish, English, French, or any language you prefer.</div>
-                            </div>
-                            <div class="multilingual-reset-wrap">
-                                <small class="multilingual-reset">🔄 Use the 'Reset' button to change lesson or tutor during a session.</small>
-                            </div>
+                <div class="multilingual-row">
+                    <span class="multilingual-icon" aria-hidden="true">🌍</span>
+                    <div class="multilingual-content">
+                        <div class="multilingual-title">Multilingual Support</div>
+                        <div class="multilingual-desc">The tutor automatically responds in your language. Chat in Spanish, English, French, or any language you prefer.</div>
+                    </div>
+                    <div class="multilingual-reset-wrap">
+                        <small class="multilingual-reset">🔄 Use the 'Reset' button to change lesson or tutor during a session.</small>
                     </div>
                 </div>
             </footer>