Update app.py

app.py

@@ -43,8 +43,6 @@ def translate_text(source_text, source_lang, target_lang, temperature, top_k, re
     return gen_translate(source_text, source_lang, target_lang, temperature, top_k, repetition_penalty, max_tokens)
 
 languages = ["English", "Hindi", "Bengali", "Tamil", "Telugu", "Kannada", "Panjabi"]
-# css_path = "static/style.css"
-# custom_css = open(css_path, encoding="utf-8").read() if os.path.isfile(css_path) else ""
 
 theme_lock_css = """
 .gradio-container .theme-toggle,
@@ -54,16 +52,97 @@ theme_lock_css = """
 .gradio-container [data-testid="theme-toggle"] {
     display: none !important;
 }
-
 :root { color-scheme: dark !important; }
-
 body, .gradio-container {
     background-color: #0a1628 !important;
     color: #e6eef8 !important;
 }
+
+/* Mobile-responsive header fixes */
+.main-header {
+    padding: 10px 5px !important;
+}
+
+.header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.logo-section {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    min-width: 0;
+}
+
+.logo-section h3 {
+    margin-left: 8px;
+    margin-top: 0;
+    margin-bottom: 0;
+    white-space: nowrap;
+    font-size: 1rem;
+}
+
+.main-title {
+    flex: 1;
+    text-align: center;
+    min-width: 0;
+}
+
+.main-title h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    line-height: 1.2;
+    word-break: break-word;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .header-container {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 15px;
+    }
+    
+    .logo-section {
+        order: 1;
+    }
+    
+    .main-title {
+        order: 2;
+        width: 100%;
+    }
+    
+    .main-title h1 {
+        font-size: 1.3rem;
+        margin: 0;
+    }
+    
+    .logo-section h3 {
+        font-size: 0.9rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .main-title h1 {
+        font-size: 1.1rem;
+    }
+    
+    .logo-section h3 {
+        font-size: 0.8rem;
+    }
+    
+    .main-header {
+        padding: 8px 3px !important;
+    }
+}
 """
 
-# combined_css = theme_lock_css
 locked_theme = gr.themes.Monochrome(primary_hue="blue", secondary_hue="slate", neutral_hue="slate").set(
     background_fill_primary="#0a1628",
     background_fill_secondary="#1f2937", 
@@ -86,7 +165,6 @@ with gr.Blocks(
         document.documentElement.setAttribute('data-theme', 'dark');
         document.body.classList.add('dark');
         document.body.classList.remove('light');
-
         const observer = new MutationObserver(function(mutations) {{
             mutations.forEach(function(mutation) {{
                 mutation.addedNodes.forEach(function(node) {{
@@ -105,18 +183,14 @@ with gr.Blocks(
     with gr.Row(elem_classes="main-header"):
         with gr.Column():
             gr.HTML(f"""
-            <div style="display:flex;align-items:center;justify-content:space-between;width:100%;">
-                <!-- left: logo + text on one line -->
-                <div style="display:flex;align-items:center;">
+            <div class="header-container">
+                <div class="logo-section">
                     {LOGO_HTML}
-                    <h3 style="margin-left:8px;margin-top:0;margin-bottom:0;">Maruth Labs</h3>
+                    <h3>Maruth Labs</h3>
+                </div>
+                <div class="main-title">
+                    <h1>Madhuram Translation Model</h1>
                 </div>
-
-                <!-- center title -->
-                <div class="main-title"><h1>Madhuram Translation Model</h1></div>
-
-                <!-- spacer to balance flex -->
-                <div style="width:120px;"></div>
             </div>
             """)