Enhance mobile responsiveness and improve UI elements in Gradio interface

app.py

@@ -309,10 +309,23 @@ def load_sample_json():
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
+/* Global mobile-first settings */
+* {
+    box-sizing: border-box !important;
+}
+
+html, body {
+    overflow-x: hidden !important;
+    width: 100% !important;
+}
+
 .gradio-container {
     font-family: 'Inter', sans-serif !important;
     max-width: 1400px !important;
     margin: 0 auto !important;
+    padding: 10px !important;
+    width: 100% !important;
+    overflow-x: hidden !important;
 }
 
 /* Header styling */
@@ -327,6 +340,21 @@ custom_css = """
     margin-bottom: 0.5em;
 }
 
+/* Mobile responsive header */
+@media (max-width: 768px) {
+    .gradio-container h1 {
+        font-size: 2em !important;
+    }
+    
+    .gradio-container h3 {
+        font-size: 1.2em !important;
+    }
+    
+    .gradio-container p {
+        font-size: 0.9em !important;
+    }
+}
+
 /* Tab styling */
 .tab-nav {
     border-radius: 12px !important;
@@ -343,6 +371,14 @@ button.selected {
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
 }
 
+/* Mobile tab styling */
+@media (max-width: 768px) {
+    .tab-nav button {
+        font-size: 0.85em !important;
+        padding: 8px 12px !important;
+    }
+}
+
 /* Button styling */
 .primary-btn {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -361,6 +397,15 @@ button.selected {
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
 }
 
+/* Mobile button styling */
+@media (max-width: 768px) {
+    .primary-btn {
+        width: 100% !important;
+        padding: 14px 20px !important;
+        font-size: 15px !important;
+    }
+}
+
 /* Input fields */
 textarea, input[type="text"] {
     border-radius: 10px !important;
@@ -375,6 +420,14 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
 }
 
+/* Mobile input fields */
+@media (max-width: 768px) {
+    textarea, input[type="text"] {
+        font-size: 16px !important;
+        padding: 10px !important;
+    }
+}
+
 /* Output boxes */
 .output-class {
     background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
@@ -438,18 +491,142 @@ label {
     border-color: #764ba2 !important;
     background: #f8f9fa !important;
 }
+
+/* Mobile responsive layout */
+@media (max-width: 768px) {
+    .gr-row {
+        flex-direction: column !important;
+        gap: 15px !important;
+    }
+    
+    .gr-column {
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 0 !important;
+        flex: 0 0 100% !important;
+    }
+    
+    .gr-file {
+        padding: 20px !important;
+    }
+    
+    /* Stack columns vertically on mobile */
+    .gradio-container .gr-form {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+    
+    /* Prevent text overflow */
+    .gradio-container {
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
+    }
+    
+    /* Better spacing on mobile */
+    .gr-box {
+        margin: 10px 0 !important;
+    }
+    
+    /* Tabs scrollable on mobile */
+    .tab-nav {
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+        white-space: nowrap !important;
+    }
+}
+
+/* Improve touch targets for mobile */
+@media (max-width: 768px) {
+    button, a, input, textarea, select {
+        min-height: 44px !important;
+        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2) !important;
+    }
+    
+    label {
+        font-size: 15px !important;
+        margin-bottom: 10px !important;
+    }
+    
+    /* Better radio and checkbox sizing */
+    .gr-radio label, .gr-checkbox label {
+        padding: 12px !important;
+        min-height: 44px !important;
+        display: flex !important;
+        align-items: center !important;
+    }
+    
+    /* Mobile-friendly sliders */
+    input[type="range"] {
+        height: 44px !important;
+        padding: 10px 0 !important;
+    }
+    
+    /* Examples section */
+    .gr-samples-table {
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch !important;
+    }
+}
+
+/* Footer responsive */
+@media (max-width: 768px) {
+    .footer {
+        padding: 20px 10px !important;
+    }
+    
+    .footer h2 {
+        font-size: 1.5em !important;
+    }
+    
+    .footer p {
+        font-size: 0.9em !important;
+    }
+}
+
+/* Smaller screens (phones in portrait) */
+@media (max-width: 480px) {
+    .gradio-container h1 {
+        font-size: 1.5em !important;
+    }
+    
+    .tab-nav button {
+        font-size: 0.75em !important;
+        padding: 6px 10px !important;
+    }
+    
+    .primary-btn {
+        font-size: 14px !important;
+        padding: 12px 16px !important;
+    }
+    
+    /* Reduce line count for better mobile UX */
+    textarea {
+        min-height: 100px !important;
+    }
+}
+
+/* Landscape mobile */
+@media (max-width: 768px) and (orientation: landscape) {
+    .gradio-container h1 {
+        font-size: 1.8em !important;
+        margin-bottom: 0.3em !important;
+    }
+}
 """
 
 # Create Gradio interface
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP Demo") as demo:
     
+    # Add viewport meta tag for proper mobile rendering
+    gr.HTML("""<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">""")
+    
     gr.Markdown("# 🚀 MissionControlMCP")
     gr.Markdown("### Enterprise Automation Tools - Powered by AI")
     
     gr.HTML("""
     <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; margin-bottom: 30px;">
-        <h3 style="color: white; margin: 0;">✨ Try all 8 powerful tools in your browser - No installation needed! ✨</h3>
-        <p style="margin: 10px 0 0 0; opacity: 0.9;">Built for HuggingFace Gradio Hackathon | Claude MCP Integration</p>
+        <h3 style="color: white; margin: 0; font-size: clamp(1rem, 4vw, 1.5rem);">✨ Try all 8 powerful tools in your browser - No installation needed! ✨</h3>
+        <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: clamp(0.8rem, 3vw, 1rem);">Built for HuggingFace Gradio Hackathon | Claude MCP Integration</p>
     </div>
     """)
     
@@ -830,55 +1007,55 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="MissionControlMCP
     # Footer
     gr.HTML("""
     <div class="footer">
-        <h2 style="margin-bottom: 20px;">🎯 About MissionControlMCP</h2>
+        <h2 style="margin-bottom: 20px; font-size: clamp(1.2rem, 5vw, 2rem);">🎯 About MissionControlMCP</h2>
         
-        <p style="font-size: 18px; margin-bottom: 20px;">
+        <p style="font-size: clamp(0.9rem, 3vw, 1.125rem); margin-bottom: 20px;">
             <strong>8 enterprise-grade automation tools</strong> integrated with Claude Desktop via Model Context Protocol (MCP)
         </p>
         
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 30px 0;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 30px 0;">
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>📄 PDF Reader</strong><br/>
-                <small>Extract text from documents</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">📄 PDF Reader</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Extract text from documents</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>📝 Text Extractor</strong><br/>
-                <small>Keywords & summaries</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">📝 Text Extractor</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Keywords & summaries</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>🌐 Web Fetcher</strong><br/>
-                <small>Scrape websites</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">🌐 Web Fetcher</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Scrape websites</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>🔍 RAG Search</strong><br/>
-                <small>Semantic search</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">🔍 RAG Search</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Semantic search</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>📊 Data Visualizer</strong><br/>
-                <small>Create charts</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">📊 Data Visualizer</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Create charts</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>🔄 File Converter</strong><br/>
-                <small>Format conversions</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">🔄 File Converter</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Format conversions</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>📧 Email Classifier</strong><br/>
-                <small>Intent detection</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">📧 Email Classifier</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Intent detection</small>
             </div>
             <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong>📈 KPI Generator</strong><br/>
-                <small>Business analytics</small>
+                <strong style="font-size: clamp(0.85rem, 2.5vw, 1rem);">📈 KPI Generator</strong><br/>
+                <small style="font-size: clamp(0.7rem, 2vw, 0.875rem);">Business analytics</small>
             </div>
         </div>
         
         <div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #e9ecef;">
-            <p style="font-size: 16px; margin: 10px 0;">
+            <p style="font-size: clamp(0.85rem, 2.5vw, 1rem); margin: 10px 0;">
                 🔗 <a href="https://github.com/AlBaraa-1/CleanEye-Hackathon" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600;">View on GitHub</a>
             </p>
-            <p style="margin: 10px 0; color: #6c757d;">
+            <p style="margin: 10px 0; color: #6c757d; font-size: clamp(0.75rem, 2vw, 0.875rem);">
                 🏆 Built for HuggingFace Gradio x BuildWithMCP Hackathon
             </p>
-            <p style="margin: 10px 0; color: #6c757d;">
+            <p style="margin: 10px 0; color: #6c757d; font-size: clamp(0.75rem, 2vw, 0.875rem);">
                 Made with ❤️ using Python, Gradio, Claude MCP, FAISS, and Sentence Transformers
             </p>
         </div>