Enhance UI for mobile responsiveness and improve styling across components

app.py

@@ -305,7 +305,7 @@ def load_sample_json():
 # GRADIO INTERFACE
 # ============================================================================
 
-# Custom CSS for beautiful UI
+# Custom CSS for beautiful UI with mobile responsiveness
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
@@ -313,26 +313,40 @@ custom_css = """
     font-family: 'Inter', sans-serif !important;
     max-width: 1400px !important;
     margin: 0 auto !important;
+    padding: 10px !important;
 }
 
-/* Header styling */
+/* Header styling - Responsive */
 .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: 3em !important;
+    font-size: clamp(1.8em, 5vw, 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;
 }
 
-/* Tab styling */
+/* Tab styling - Mobile optimized */
 .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 {
@@ -341,19 +355,25 @@ 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 */
+/* Button styling - Touch-friendly */
 .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: 12px 24px !important;
+    padding: 14px 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 {
@@ -361,26 +381,35 @@ button.selected {
     box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
 }
 
-/* Input fields */
+.primary-btn:active {
+    transform: translateY(0) !important;
+}
+
+/* Input fields - Mobile optimized */
 textarea, input[type="text"] {
     border-radius: 10px !important;
     border: 2px solid #e9ecef !important;
     padding: 12px !important;
-    font-size: 15px !important;
+    font-size: 16px !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 */
+/* Output boxes - Scrollable on mobile */
 .output-class {
     background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
     border-radius: 12px !important;
-    padding: 20px !important;
+    padding: 15px !important;
     border: 2px solid #e9ecef !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
 /* Cards and containers */
@@ -390,54 +419,144 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
 }
 
-/* Labels */
+/* Labels - Larger for readability */
 label {
     font-weight: 600 !important;
     color: #495057 !important;
-    font-size: 14px !important;
+    font-size: 15px !important;
     margin-bottom: 8px !important;
+    display: block !important;
 }
 
-/* Examples */
+/* Examples - Mobile scrollable */
 .gr-samples-table {
     border-radius: 10px !important;
-    overflow: hidden !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
-/* Footer */
+/* Footer - Responsive */
 .footer {
     text-align: center;
-    padding: 30px;
+    padding: 20px 15px !important;
     background: linear-gradient(to right, #f8f9fa, #e9ecef);
     border-radius: 12px;
     margin-top: 30px;
 }
 
-/* Image display */
+/* Image display - Responsive */
 .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 */
+/* Radio buttons and checkboxes - Touch-friendly */
 .gr-radio, .gr-checkbox {
-    padding: 10px !important;
+    padding: 12px !important;
     border-radius: 8px !important;
 }
 
-/* File upload */
+.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 */
 .gr-file {
     border: 2px dashed #667eea !important;
     border-radius: 12px !important;
     background: linear-gradient(to bottom, #ffffff, #f8f9fa) !important;
-    padding: 30px !important;
+    padding: 20px 15px !important;
+    min-height: 100px !important;
 }
 
 .gr-file:hover {
     border-color: #764ba2 !important;
     background: #f8f9fa !important;
 }
+
+/* Mobile-specific styles */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 8px !important;
+    }
+    
+    .tab-nav button {
+        font-size: 14px !important;
+        padding: 10px 12px !important;
+    }
+    
+    .primary-btn {
+        font-size: 15px !important;
+        padding: 16px 20px !important;
+    }
+    
+    .output-class {
+        padding: 12px !important;
+        font-size: 14px !important;
+    }
+    
+    .footer {
+        padding: 15px 10px !important;
+    }
+    
+    .footer h2 {
+        font-size: 1.5em !important;
+        margin-bottom: 15px !important;
+    }
+    
+    .footer p {
+        font-size: 14px !important;
+    }
+}
+
+/* Small mobile devices */
+@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;
+    }
+    
+    textarea, input[type="text"] {
+        font-size: 16px !important;
+        padding: 10px !important;
+    }
+    
+    .output-class {
+        font-size: 13px !important;
+        padding: 10px !important;
+    }
+}
+
+/* Landscape mobile */
+@media (max-width: 768px) and (orientation: landscape) {
+    .gradio-container h1 {
+        font-size: 2em !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
@@ -447,9 +566,9 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="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>
+    <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>
     """)
     
@@ -830,55 +949,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: 15px; font-size: clamp(1.2em, 4vw, 1.8em);">🎯 About MissionControlMCP</h2>
         
-        <p style="font-size: 18px; margin-bottom: 20px;">
+        <p style="font-size: clamp(0.9em, 3vw, 1.1em); margin-bottom: 20px; padding: 0 10px;">
             <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="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>
+        <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>
-            <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>
+            <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>
-            <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>
+            <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>
-            <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>
+            <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>
-            <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>
+            <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>
-            <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>
+            <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>
-            <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>
+            <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>
-            <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>
+            <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>
         </div>
         
-        <div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #e9ecef;">
-            <p style="font-size: 16px; 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>
+        <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>
             </p>
-            <p style="margin: 10px 0; color: #6c757d;">
+            <p style="margin: 10px 0; color: #6c757d; font-size: clamp(0.8em, 2.2vw, 0.95em); padding: 0 10px;">
                 🏆 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.8em, 2.2vw, 0.95em); padding: 0 10px;">
                 Made with ❤️ using Python, Gradio, Claude MCP, FAISS, and Sentence Transformers
             </p>
         </div>