From 0f135e61bbb1e1bde8b45f5bc511d1af039a9504 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 2 Oct 2025 12:00:59 +0300
Subject: [PATCH] Improve remaining time styling and settings button logic

---
 .../controls/CustomRemainingTime.css          | 39 +++++++++++++++++++
 .../components/controls/CustomSettingsMenu.js | 13 +------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css b/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
index f11ad998..0749c733 100644
--- a/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
+++ b/frontend-tools/video-js/src/components/controls/CustomRemainingTime.css
@@ -9,4 +9,43 @@
     justify-content: center;
     height: 100%;
     color: #fff;
+    white-space: nowrap;
+    padding: 0 4px;
+}
+
+.vjs-control-bar .custom-remaining-time {
+    flex-shrink: 1 !important;
+    min-width: 0 !important;
+}
+
+/* Responsive time display sizing */
+@media (max-width: 767px) {
+    .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
+        font-size: 11px !important;
+        padding: 0 2px;
+    }
+}
+
+@media (max-width: 500px) {
+    .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
+        font-size: 9px !important;
+        padding: 0 1px;
+        letter-spacing: -0.3px;
+    }
+}
+
+@media (max-width: 480px) {
+    .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
+        font-size: 9px !important;
+        padding: 0 1px;
+        letter-spacing: -0.3px;
+    }
+}
+
+@media (max-width: 399px) {
+    .vjs-control-bar .custom-remaining-time .vjs-remaining-time-display {
+        font-size: 8px !important;
+        padding: 0;
+        letter-spacing: -0.5px;
+    }
 }
diff --git a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
index 40416df6..69f0176a 100644
--- a/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
+++ b/frontend-tools/video-js/src/components/controls/CustomSettingsMenu.js
@@ -494,17 +494,8 @@ class CustomSettingsMenu extends Component {
     }
 
     positionButton() {
-        const controlBar = this.player().getChild('controlBar');
-        const fullscreenToggle = controlBar.getChild('fullscreenToggle');
-
-        if (this.settingsButton && fullscreenToggle) {
-            // Small delay to ensure all buttons are created
-            setTimeout(() => {
-                const fullscreenIndex = controlBar.children().indexOf(fullscreenToggle);
-                controlBar.removeChild(this.settingsButton);
-                controlBar.addChild(this.settingsButton, {}, fullscreenIndex + 1);
-            }, 50);
-        }
+        // CSS flexbox order handles positioning - no manual repositioning needed
+        // The settings button will be positioned according to the order property in CSS
     }
 
     setupEventListeners() {