Enhance mobile responsiveness of the Gradio app by adding CSS styles for various screen sizes and updating the HTML structure for better layout. Include viewport meta tag for improved scaling on mobile devices.

ui_main.py

@@ -23,9 +23,11 @@ def create_clean_app():
         available_models = []
     data_status = f"✅ Yüklendi: {len(leaderboard_data)} liderlik tablosu girişi, {len(responses_data)} cevap, {len(available_models)} model"
 
-    with gr.Blocks(css=CLEAN_CSS, title="Türkçe MMLU Liderlik Tablosu") as app:
+    with gr.Blocks(css=CLEAN_CSS, title="Türkçe MMLU Liderlik Tablosu", head="""
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    """) as app:
         gr.HTML(f"""
-            <div class=\"main-header\">
+            <div class="main-header">
                 <h1>🏆 Türkçe MMLU Liderlik Tablosu</h1>
                 <p>Yapay zeka modellerinin Türkçe dil görevlerindeki kapsamlı değerlendirmesi</p>
             </div>
@@ -40,7 +42,7 @@ def create_clean_app():
             add_submit_model_tab(tabs, api_service)
         
         gr.HTML("""
-            <div style=\"text-align: center; padding: 20px; color: #64748b; border-top: 1px solid #e2e8f0; margin-top: 40px;\">
+            <div style="text-align: center; padding: 20px; color: #64748b; border-top: 1px solid #e2e8f0; margin-top: 40px;">
                 <p>🏆 Türkçe MMLU Liderlik Tablosu • Gradio ile Geliştirildi</p>
             </div>
         """)

ui_utils.py

@@ -61,4 +61,327 @@ CLEAN_CSS = """
 .status-processing { border-left-color: #3b82f6; }
 .status-completed { border-left-color: #10b981; }
 .status-failed { border-left-color: #ef4444; }
+
+/* Mobile Responsive Styles */
+@media screen and (max-width: 768px) {
+    .gradio-container {
+        max-width: 100% !important;
+        padding: 0 10px !important;
+        margin: 0 !important;
+    }
+    
+    .main-header {
+        padding: 1.5rem 1rem !important;
+        margin-bottom: 1.5rem !important;
+        border-radius: 8px !important;
+    }
+    
+    .main-header h1 {
+        font-size: 1.8rem !important;
+        line-height: 1.2 !important;
+    }
+    
+    .main-header p {
+        font-size: 1rem !important;
+    }
+    
+    .status-info {
+        padding: 0.8rem !important;
+        margin: 0.8rem 0 !important;
+        font-size: 0.85rem !important;
+    }
+    
+    /* Mobile Row Layouts */
+    .gradio-row {
+        flex-direction: column !important;
+        gap: 0.5rem !important;
+    }
+    
+    .gradio-column {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+    
+    /* Mobile Button Groups */
+    .gradio-row .gr-button {
+        width: 100% !important;
+        margin: 0.25rem 0 !important;
+        padding: 0.75rem !important;
+        font-size: 0.9rem !important;
+    }
+    
+    /* Mobile Dropdowns and Inputs */
+    .gr-dropdown,
+    .gr-textbox,
+    .gr-slider {
+        width: 100% !important;
+    }
+    
+    .gr-dropdown label,
+    .gr-textbox label,
+    .gr-slider label {
+        font-size: 0.9rem !important;
+    }
+    
+    /* Mobile Tables */
+    .gr-dataframe {
+        overflow-x: auto !important;
+        font-size: 0.85rem !important;
+    }
+    
+    .gr-dataframe table {
+        min-width: 600px !important;
+    }
+    
+    .gr-dataframe th,
+    .gr-dataframe td {
+        padding: 0.5rem !important;
+        white-space: nowrap !important;
+    }
+    
+    /* Mobile Tabs */
+    .gradio-tabs {
+        overflow-x: auto !important;
+    }
+    
+    .gradio-tabs .tab-nav {
+        flex-wrap: nowrap !important;
+        overflow-x: auto !important;
+        scrollbar-width: thin !important;
+    }
+    
+    .gradio-tabs .tab-nav button {
+        min-width: 120px !important;
+        font-size: 0.85rem !important;
+        padding: 0.5rem 0.75rem !important;
+        white-space: nowrap !important;
+    }
+    
+    /* Mobile Accordions */
+    .gr-accordion {
+        margin: 0.5rem 0 !important;
+    }
+    
+    .gr-accordion summary {
+        font-size: 0.9rem !important;
+        padding: 0.75rem !important;
+    }
+    
+    /* Mobile Checkbox Groups */
+    .gr-checkbox-group {
+        max-height: 200px !important;
+        overflow-y: auto !important;
+    }
+    
+    .gr-checkbox-group label {
+        font-size: 0.85rem !important;
+        padding: 0.5rem !important;
+    }
+    
+    /* Mobile Markdown */
+    .gr-markdown h1,
+    .gr-markdown h2,
+    .gr-markdown h3 {
+        font-size: 1.2rem !important;
+        line-height: 1.3 !important;
+        margin: 1rem 0 0.5rem 0 !important;
+    }
+    
+    .gr-markdown p {
+        font-size: 0.9rem !important;
+        line-height: 1.4 !important;
+        margin: 0.5rem 0 !important;
+    }
+    
+    /* Mobile Evaluation Cards */
+    .evaluation-card {
+        padding: 15px !important;
+        margin: 8px 0 !important;
+        border-radius: 8px !important;
+    }
+    
+    /* Mobile HTML Components */
+    .gr-html {
+        font-size: 0.85rem !important;
+    }
+    
+    .gr-html div[style*="grid-template-columns"] {
+        display: block !important;
+    }
+    
+    .gr-html div[style*="grid-template-columns"] > div {
+        margin-bottom: 1rem !important;
+    }
+    
+    /* Mobile Footer */
+    .gradio-container > div:last-child {
+        font-size: 0.8rem !important;
+        padding: 15px !important;
+    }
+    
+    /* Mobile Pagination */
+    .gr-slider {
+        margin: 0.5rem 0 !important;
+    }
+    
+    .gr-slider label {
+        margin-bottom: 0.5rem !important;
+    }
+    
+    /* Mobile Navigation Buttons */
+    .gradio-row button[aria-label*="Previous"],
+    .gradio-row button[aria-label*="Next"],
+    button:contains("Önceki"),
+    button:contains("Sonraki") {
+        flex: 1 !important;
+        min-width: 120px !important;
+    }
+    
+    /* Mobile Form Elements */
+    .gr-textbox input,
+    .gr-dropdown select {
+        font-size: 16px !important; /* Prevents zoom on iOS */
+    }
+    
+    /* Mobile Info Sections */
+    .gr-html div[style*="padding: 15px"] {
+        padding: 12px !important;
+        font-size: 0.85rem !important;
+        line-height: 1.4 !important;
+    }
+    
+    /* Mobile Status Messages */
+    .gr-html div[style*="color: green"],
+    .gr-html div[style*="color: red"],
+    .gr-html div[style*="color: orange"] {
+        margin: 0.5rem 0 !important;
+        border-radius: 6px !important;
+    }
+}
+
+/* Tablet Responsive Styles */
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+    .gradio-container {
+        max-width: 95% !important;
+        padding: 0 20px !important;
+    }
+    
+    .main-header {
+        padding: 1.8rem !important;
+    }
+    
+    .main-header h1 {
+        font-size: 2.2rem !important;
+    }
+    
+    .gr-dataframe table {
+        font-size: 0.9rem !important;
+    }
+    
+    .gradio-tabs .tab-nav button {
+        font-size: 0.9rem !important;
+    }
+}
+
+/* Touch-friendly interactions */
+@media (hover: none) and (pointer: coarse) {
+    .gr-button {
+        min-height: 44px !important;
+        padding: 0.75rem 1rem !important;
+    }
+    
+    .gradio-tabs .tab-nav button {
+        min-height: 44px !important;
+    }
+    
+    .gr-dropdown,
+    .gr-textbox input {
+        min-height: 44px !important;
+    }
+    
+    .gr-checkbox-group label {
+        min-height: 44px !important;
+        display: flex !important;
+        align-items: center !important;
+    }
+    
+    /* Better touch targets for navigation */
+    .gr-accordion summary {
+        min-height: 44px !important;
+        display: flex !important;
+        align-items: center !important;
+    }
+}
+
+/* Horizontal scroll for tables on small screens */
+@media screen and (max-width: 480px) {
+    .gr-dataframe {
+        border-radius: 4px !important;
+    }
+    
+    .gr-dataframe table {
+        min-width: 500px !important;
+        font-size: 0.8rem !important;
+    }
+    
+    .gr-dataframe th,
+    .gr-dataframe td {
+        padding: 0.4rem !important;
+    }
+    
+    .main-header h1 {
+        font-size: 1.5rem !important;
+    }
+    
+    .main-header p {
+        font-size: 0.9rem !important;
+    }
+    
+    .gradio-tabs .tab-nav button {
+        min-width: 100px !important;
+        font-size: 0.8rem !important;
+        padding: 0.4rem 0.6rem !important;
+    }
+    
+    /* Very small screen adjustments */
+    .gradio-container {
+        padding: 0 5px !important;
+    }
+    
+    .main-header {
+        padding: 1rem 0.75rem !important;
+    }
+    
+    .status-info {
+        padding: 0.6rem !important;
+        font-size: 0.8rem !important;
+    }
+    
+    /* Compact button layout for very small screens */
+    .gradio-row .gr-button {
+        padding: 0.6rem !important;
+        font-size: 0.85rem !important;
+    }
+}
+
+/* Landscape orientation on phones */
+@media screen and (max-height: 480px) and (orientation: landscape) {
+    .main-header {
+        padding: 1rem !important;
+        margin-bottom: 1rem !important;
+    }
+    
+    .main-header h1 {
+        font-size: 1.6rem !important;
+        margin-bottom: 0.25rem !important;
+    }
+    
+    .main-header p {
+        font-size: 0.9rem !important;
+    }
+    
+    .gr-accordion {
+        margin: 0.25rem 0 !important;
+    }
+}
 """