Enhance mobile responsiveness and improve UI styling across Gradio components

app.py

@@ -305,48 +305,62 @@ def load_sample_json():
 # GRADIO INTERFACE
 # ============================================================================
 
-# Custom CSS for beautiful UI with mobile responsiveness
+# Custom CSS for beautiful UI
 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 - Responsive */
+/* Header styling */
 .gradio-container h1 {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    font-size: clamp(1.8em, 5vw, 3em) !important;
+    font-size: 3em !important;
     font-weight: 700 !important;
     text-align: center;
     margin-bottom: 0.5em;
-    padding: 0 10px !important;
-}
-
-/* Mobile-friendly header text */
-.gradio-container h3 {
-    font-size: clamp(1em, 3vw, 1.5em) !important;
-    line-height: 1.4 !important;
 }
 
-.gradio-container h2 {
-    font-size: clamp(1.2em, 3.5vw, 2em) !important;
+/* 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 - Mobile optimized */
+/* Tab styling */
 .tab-nav {
     border-radius: 12px !important;
     background: linear-gradient(to right, #f8f9fa, #e9ecef) !important;
     padding: 8px !important;
     margin-bottom: 20px !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch !important;
 }
 
 button.selected {
@@ -355,25 +369,27 @@ button.selected {
     border-radius: 8px !important;
     font-weight: 600 !important;
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
-    min-width: 120px !important;
-    white-space: nowrap !important;
 }
 
-/* Button styling - Touch-friendly */
+/* 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;
     border: none !important;
     color: white !important;
     font-weight: 600 !important;
     border-radius: 10px !important;
-    padding: 14px 24px !important;
+    padding: 12px 24px !important;
     font-size: 16px !important;
     transition: all 0.3s ease !important;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
-    width: 100% !important;
-    min-height: 48px !important;
-    cursor: pointer !important;
-    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3) !important;
 }
 
 .primary-btn:hover {
@@ -381,35 +397,43 @@ button.selected {
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
 }
 
-.primary-btn:active {
-    transform: translateY(0) !important;
+/* Mobile button styling */
+@media (max-width: 768px) {
+    .primary-btn {
+        width: 100% !important;
+        padding: 14px 20px !important;
+        font-size: 15px !important;
+    }
 }
 
-/* Input fields - Mobile optimized */
+/* Input fields */
 textarea, input[type="text"] {
     border-radius: 10px !important;
     border: 2px solid #e9ecef !important;
     padding: 12px !important;
-    font-size: 16px !important;
+    font-size: 15px !important;
     transition: border-color 0.3s ease !important;
-    width: 100% !important;
-    box-sizing: border-box !important;
 }
 
 textarea:focus, input[type="text"]:focus {
     border-color: #667eea !important;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
-    outline: none !important;
 }
 
-/* Output boxes - Scrollable on mobile */
+/* 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;
     border-radius: 12px !important;
-    padding: 15px !important;
+    padding: 20px !important;
     border: 2px solid #e9ecef !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch !important;
 }
 
 /* Cards and containers */
@@ -419,60 +443,48 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
 }
 
-/* Labels - Larger for readability */
+/* Labels */
 label {
     font-weight: 600 !important;
     color: #495057 !important;
-    font-size: 15px !important;
+    font-size: 14px !important;
     margin-bottom: 8px !important;
-    display: block !important;
 }
 
-/* Examples - Mobile scrollable */
+/* Examples */
 .gr-samples-table {
     border-radius: 10px !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch !important;
+    overflow: hidden !important;
 }
 
-/* Footer - Responsive */
+/* Footer */
 .footer {
     text-align: center;
-    padding: 20px 15px !important;
+    padding: 30px;
     background: linear-gradient(to right, #f8f9fa, #e9ecef);
     border-radius: 12px;
     margin-top: 30px;
 }
 
-/* Image display - Responsive */
+/* Image display */
 .gr-image {
     border-radius: 12px !important;
     border: 2px solid #e9ecef !important;
     box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
-    max-width: 100% !important;
-    height: auto !important;
 }
 
-/* Radio buttons and checkboxes - Touch-friendly */
+/* Radio buttons and checkboxes */
 .gr-radio, .gr-checkbox {
-    padding: 12px !important;
+    padding: 10px !important;
     border-radius: 8px !important;
 }
 
-.gr-radio label, .gr-checkbox label {
-    padding: 8px 12px !important;
-    min-height: 44px !important;
-    display: flex !important;
-    align-items: center !important;
-}
-
-/* File upload - Mobile optimized */
+/* File upload */
 .gr-file {
     border: 2px dashed #667eea !important;
     border-radius: 12px !important;
     background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
-    padding: 20px 15px !important;
-    min-height: 100px !important;
+    padding: 30px !important;
 }
 
 .gr-file:hover {
@@ -480,95 +492,141 @@ label {
     background: #f8f9fa !important;
 }
 
-/* Mobile-specific styles */
+/* 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 {
-        padding: 8px !important;
+        word-wrap: break-word !important;
+        overflow-wrap: break-word !important;
     }
     
-    .tab-nav button {
-        font-size: 14px !important;
-        padding: 10px 12px !important;
+    /* Better spacing on mobile */
+    .gr-box {
+        margin: 10px 0 !important;
     }
     
-    .primary-btn {
+    /* 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;
-        padding: 16px 20px !important;
+        margin-bottom: 10px !important;
     }
     
-    .output-class {
+    /* Better radio and checkbox sizing */
+    .gr-radio label, .gr-checkbox label {
         padding: 12px !important;
-        font-size: 14px !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: 15px 10px !important;
+        padding: 20px 10px !important;
     }
     
     .footer h2 {
         font-size: 1.5em !important;
-        margin-bottom: 15px !important;
     }
     
     .footer p {
-        font-size: 14px !important;
+        font-size: 0.9em !important;
     }
 }
 
-/* Small mobile devices */
+/* Smaller screens (phones in portrait) */
 @media (max-width: 480px) {
     .gradio-container h1 {
         font-size: 1.5em !important;
     }
     
-    .tab-nav {
-        padding: 5px !important;
-    }
-    
     .tab-nav button {
-        font-size: 12px !important;
-        padding: 8px 10px !important;
-        min-width: 100px !important;
+        font-size: 0.75em !important;
+        padding: 6px 10px !important;
     }
     
-    textarea, input[type="text"] {
-        font-size: 16px !important;
-        padding: 10px !important;
+    .primary-btn {
+        font-size: 14px !important;
+        padding: 12px 16px !important;
     }
     
-    .output-class {
-        font-size: 13px !important;
-        padding: 10px !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: 2em !important;
+        font-size: 1.8em !important;
         margin-bottom: 0.3em !important;
     }
 }
-
-/* Touch target improvements */
-@media (hover: none) and (pointer: coarse) {
-    button, a, input, select, textarea {
-        min-height: 44px !important;
-        min-width: 44px !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: 15px 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; margin-bottom: 20px;">
-        <h3 style="color: white; margin: 0; font-size: clamp(1em, 3vw, 1.3em); line-height: 1.4;">✨ 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.8em, 2.5vw, 1em);">Built for HuggingFace Gradio Hackathon | Claude MCP Integration</p>
+    <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; 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>
     """)
     
@@ -949,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: 15px; font-size: clamp(1.2em, 4vw, 1.8em);">🎯 About MissionControlMCP</h2>
+        <h2 style="margin-bottom: 20px; font-size: clamp(1.2rem, 5vw, 2rem);">🎯 About MissionControlMCP</h2>
         
-        <p style="font-size: clamp(0.9em, 3vw, 1.1em); margin-bottom: 20px; padding: 0 10px;">
+        <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(150px, 1fr)); gap: 12px; margin: 20px 0; padding: 0 10px;">
-            <div style="padding: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">📄 PDF Reader</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Extract text from documents</small>
+        <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 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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">📝 Text Extractor</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Keywords & summaries</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">🌐 Web Fetcher</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Scrape websites</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">🔍 RAG Search</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Semantic search</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">📊 Data Visualizer</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Create charts</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">🔄 File Converter</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Format conversions</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">📧 Email Classifier</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Intent detection</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 12px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-                <strong style="font-size: clamp(0.9em, 2.5vw, 1em);">📈 KPI Generator</strong><br/>
-                <small style="font-size: clamp(0.75em, 2vw, 0.85em);">Business analytics</small>
+            <div style="padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                <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: 20px; padding-top: 15px; border-top: 2px solid #e9ecef;">
-            <p style="font-size: clamp(0.9em, 2.5vw, 1em); margin: 10px 0; padding: 0 10px;">
-                🔗 <a href="https://github.com/AlBaraa-1/CleanEye-Hackathon" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 600; word-break: break-word;">View on GitHub</a>
+        <div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #e9ecef;">
+            <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; font-size: clamp(0.8em, 2.2vw, 0.95em); padding: 0 10px;">
+            <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; font-size: clamp(0.8em, 2.2vw, 0.95em); padding: 0 10px;">
+            <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>