From 7bf25ae2d9f9a9b52d91abbe597cfe3543f5b42d Mon Sep 17 00:00:00 2001
From: projectdx <com114@gmail.com>
Date: Sun, 4 Jan 2026 19:36:58 +0900
Subject: [PATCH] style: increase modal size, center video vertically, and fix
 icon wrapping

---
 info.yaml                  |  2 +-
 static/css/video_modal.css | 23 ++++++++++++++---------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/info.yaml b/info.yaml
index 983e524..6e8f394 100644
--- a/info.yaml
+++ b/info.yaml
@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.5.28"
+version: "0.5.29"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"
diff --git a/static/css/video_modal.css b/static/css/video_modal.css
index 7403765..95b975f 100644
--- a/static/css/video_modal.css
+++ b/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;
     }
 }