🎨 Adjust layout for buttons on mobile

Cussa · Cussa · commit f7c679ca7235 · 2025-11-23T11:35:09.000Z
diff --git a/by-type.html b/by-type.html
@@ -66,7 +66,9 @@ <h1>🔍 GitHub Issues Tracker</h1>
                 </div>
                 
                 <div style="margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;">
-                    <button id="loadBtn" style="flex: 0 0 auto;">Load Issues & PRs</button>
+                    <button id="loadBtn" style="flex: 1 1 100%; max-width: 400px;">Load Issues & PRs</button>
+                </div>
+                <div style="margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;">
                     <button id="clearCacheBtn" style="background: #6e7681; flex: 0 0 auto;">Clear Cache</button>
                     <button id="shareBtn" style="background: #238636; flex: 0 0 auto;">🔗 Share URL</button>
                 </div>
diff --git a/index.html b/index.html
@@ -66,7 +66,9 @@ <h1>🔍 GitHub Issues Tracker</h1>
                 </div>
                 
                 <div style="margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;">
-                    <button id="loadBtn" style="flex: 0 0 auto;">Load Issues & PRs</button>
+                    <button id="loadBtn" style="flex: 1 1 100%; max-width: 400px;">Load Issues & PRs</button>
+                </div>
+                <div style="margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;">
                     <button id="clearCacheBtn" style="background: #6e7681; flex: 0 0 auto;">Clear Cache</button>
                     <button id="shareBtn" style="background: #238636; flex: 0 0 auto;">🔗 Share URL</button>
                 </div>
diff --git a/styles.css b/styles.css
@@ -687,6 +687,28 @@ button:disabled {
 }
 
 @media (max-width: 768px) {
+    /* View switcher: 2 buttons per row on mobile */
+    .view-switcher {
+        gap: 8px;
+    }
+    
+    .view-btn {
+        flex: 0 0 calc(50% - 4px);
+        min-width: 0;
+        padding: 8px 12px;
+        font-size: 13px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    /* Action buttons: Clear Cache and Share URL share 50% each */
+    #clearCacheBtn,
+    #shareBtn {
+        flex: 0 0 calc(50% - 5px) !important;
+    }
+    
     .cache-detail-item {
         flex-direction: column;
         gap: 4px;
