better multilingual support

src/learnbee/theme.py

@@ -581,5 +581,81 @@ label {
         padding: 1.25rem;
     }
 }
+
+/* Multilingual footer (full-width) - centered and high-contrast for dark/light */
+.multilingual-footer {
+    width: 100%;
+    padding: 1rem 1.25rem;
+    margin-top: 1.25rem;
+    border-top: 1px solid rgba(226,232,240,0.6);
+    background: linear-gradient(90deg, #f8fafc 0%, #eef2ff 100%);
+    color: #0f172a;
+    text-align: center;
+}
+.multilingual-footer > div {
+    max-width: 1100px;
+    margin: 0 auto;
+}
+.multilingual-footer .multilingual-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+.multilingual-footer .multilingual-title {
+    font-weight: 700;
+    font-size: 1.05rem;
+}
+.multilingual-footer .multilingual-desc {
+    opacity: 0.9;
+}
+
+/* Dark mode adjustments */
+.dark .multilingual-footer {
+    background: linear-gradient(90deg, #0b1220 0%, #081226 100%);
+    color: #e6eef8;
+    border-top-color: rgba(51,65,85,0.6);
+}
+
+/* Center the main container content while keeping form inputs left-aligned for usability */
+.gradio-container {
+    text-align: center !important;
+}
+.gr-label, .gr-input, .gr-dropdown, .gr-textbox, .gr-number {
+    text-align: left !important;
+}
+
+/* Ensure cards and containers are centered within the page */
+.welcome-card, .info-box, .column-container, .chat-container {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+/* Footer fine-tuning: center icon + title and unify reset text size */
+.multilingual-footer .multilingual-icon {
+    font-size: 1.6rem;
+    display: inline-block;
+}
+.multilingual-footer .multilingual-content {
+    min-width: 280px;
+    text-align: center;
+}
+.multilingual-footer .multilingual-title {
+    font-size: 1.05rem;
+    font-weight: 700;
+    margin-bottom: 0.15rem;
+}
+.multilingual-footer .multilingual-desc {
+    font-size: 0.95rem;
+    opacity: 0.92;
+}
+.multilingual-footer .multilingual-reset {
+    font-size: 0.95rem;
+    opacity: 0.92;
+}
+.multilingual-footer .multilingual-reset-wrap {
+    margin-left: 0.5rem;
+}
 """
 

src/learnbee/ui.py

@@ -166,23 +166,9 @@ def create_gradio_ui():
                             outputs=[selected_tutor],
                         )
 
-                    # Multilingual Support - Centered and Beautiful
+                    # Spacer where the multilingual card used to be (moved to footer)
                     with gr.Row():
-                        gr.HTML("""
-                            <div class="multilingual-card">
-                                <div class="multilingual-header">
-                                    <span class="multilingual-icon">🌍</span>
-                                    <h3 class="multilingual-title">Multilingual Support</h3>
-                                </div>
-                                <p class="multilingual-text">
-                                    The tutor automatically responds in your language! Chat in English, Spanish, French, or any language you prefer.
-                                </p>
-                                <div class="multilingual-note">
-                                    <span class="note-icon">🔄</span>
-                                    <span class="note-text">Can't change lesson or tutor while chatting? Use the reset button to start fresh!</span>
-                                </div>
-                            </div>
-                        """)
+                        gr.HTML('<div style="height:0.5rem;"></div>')
 
                 with gr.Column(scale=2):
                     # Chat interface - defined before use
@@ -345,5 +331,23 @@ def create_gradio_ui():
                     )
             btn.click(get_lesson_content, [lesson_name_input, lesson_len], lesson_content_output)
 
+        # 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>
+                </div>
+            </footer>
+        """)
+
     return demo