fix: vertical centering and icon wrapping refinements

info.yaml

@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.5.32"
+version: "0.5.33"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"

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 */
+    flex-direction: column; /* Center child vertically */
-    justify-content: center; /* Horizontal center */
+    align-items: center;
-    min-height: 400px; /* Ensure enough height for centering */
+    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;
+    align-items: center;
-    width: 100%; /* Ensure it takes full width to trigger wrap */
+    gap: 12px;
+    width: 100%;
+    padding: 10px 0;
 }
 .ext-player-btn {
     display: flex;

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>
                     <!-- 화면 꽉 채우기 토글 버튼 (모바일용) -->