From 2a5f5dce2b34691a288609639ae6348cc0aee11d Mon Sep 17 00:00:00 2001
From: projectdx <com114@gmail.com>
Date: Sun, 4 Jan 2026 19:53:21 +0900
Subject: [PATCH] fix: vertical centering and icon wrapping refinements

---
 info.yaml                                     |  2 +-
 static/css/video_modal.css                    | 24 ++++++++++++++-----
 .../components/video_modal.html               |  2 +-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/info.yaml b/info.yaml
index 4c61c85..1f9be4c 100644
--- a/info.yaml
+++ b/info.yaml
@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.5.32"
+version: "0.5.33"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"
diff --git a/static/css/video_modal.css b/static/css/video_modal.css
index 99d3b48..2e4963c 100644
--- a/static/css/video_modal.css
+++ b/static/css/video_modal.css
@@ -24,6 +24,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-height: 0; /* Crucial for flex nested items */
 }
 
 /* Close Button - Prominent */
@@ -56,9 +57,17 @@
     background: #000;
     flex: 1;
     display: flex;
-    align-items: center; /* Vertical center */
-    justify-content: center; /* Horizontal center */
-    min-height: 400px; /* Ensure enough height for centering */
+    flex-direction: column; /* Center child vertically */
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+}
+
+/* Ensure Video.js container itself is centered */
+.video-container .video-js {
+    margin: auto !important;
+    max-width: 100%;
+    max-height: 100%;
 }
 
 /* Zoom Button */
@@ -199,10 +208,13 @@
 }
 .external-players-grid {
     display: flex;
-    flex-wrap: wrap; /* Allow wrapping */
+    flex-direction: row;
+    flex-wrap: wrap !important; /* Force wrap */
     justify-content: center;
-    gap: 10px;
-    width: 100%; /* Ensure it takes full width to trigger wrap */
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 0;
 }
 .ext-player-btn {
     display: flex;
diff --git a/templates/anime_downloader/components/video_modal.html b/templates/anime_downloader/components/video_modal.html
index 94d773c..06f02a0 100644
--- a/templates/anime_downloader/components/video_modal.html
+++ b/templates/anime_downloader/components/video_modal.html
@@ -17,7 +17,7 @@
             </div>
             <div class="modal-body" style="padding: 0;">
                 <div class="video-container" style="position: relative; overflow: hidden; background: #000;">
-                    <video id="video-player" class="video-js vjs-big-play-centered vjs-theme-fantasy" controls preload="auto" playsinline webkit-playsinline style="width: 100%; height: auto; max-height: 80vh;">
+                    <video id="video-player" class="video-js vjs-big-play-centered vjs-theme-fantasy m-auto" controls preload="auto" playsinline webkit-playsinline>
                         <p class="vjs-no-js">JavaScript가 필요합니다.</p>
                     </video>
                     <!-- 화면 꽉 채우기 토글 버튼 (모바일용) -->