style: increase modal size, center video vertically, and fix icon wrapping

static/css/video_modal.css

@@ -5,7 +5,7 @@
 
 /* Modal - Desktop: Centered, Mobile: Fullscreen */
 #videoModal .modal-dialog {
-    max-width: 900px;
+    max-width: 1100px; /* Increased from 900px */
     margin: 30px auto;
     height: auto;
 }
@@ -56,8 +56,9 @@
     background: #000;
     flex: 1;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: center; /* Vertical center */
+    justify-content: center; /* Horizontal center */
+    min-height: 400px; /* Ensure enough height for centering */
 }
 
 /* Zoom Button */
@@ -192,10 +193,9 @@
 
 /* External Players Section */
 .external-players {
-    padding: 8px 16px;
+    padding: 12px 16px;
     background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
-    overflow-x: hidden; /* Prevent horizontal scroll */
 }
 .external-players-grid {
     display: flex;
@@ -287,13 +287,18 @@
         justify-content: flex-end;
     }
     .external-players-grid {
-        gap: 4px;
+        display: flex;
+        flex-wrap: wrap; /* Force wrap */
+        justify-content: center;
+        gap: 8px; /* Increased gap slightly for better spacing when wrapped */
+        padding: 5px 0;
     }
     .ext-player-btn {
-        padding: 4px;
+        padding: 6px;
+        min-width: 44px; /* Ensure touch targets are large enough */
     }
     .ext-player-btn img {
-        width: 20px;
-        height: 20px;
+        width: 24px;
+        height: 24px;
     }
 }