From 4ddf488ab5c3f58ae6be811737db7598d05ed13c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 20 Jul 2023 10:53:22 +0200
Subject: [PATCH] Improve player settings menu style

---
 .../player/shared/settings/settings-menu-button.ts |  2 +-
 client/src/sass/player/settings-menu.scss          | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/assets/player/shared/settings/settings-menu-button.ts b/client/src/assets/player/shared/settings/settings-menu-button.ts
index 9499a43eb..9b28c94db 100644
--- a/client/src/assets/player/shared/settings/settings-menu-button.ts
+++ b/client/src/assets/player/shared/settings/settings-menu-button.ts
@@ -198,7 +198,7 @@ class SettingsButton extends Button {
 
     if (height > maxHeight) {
       height = maxHeight
-      width += 17
+      width += 15
       panelEl.style.maxHeight = `${height}px`
     } else if (panelEl.style.maxHeight !== '') {
       panelEl.style.maxHeight = ''
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index cc3cdedb6..2a1303287 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -18,12 +18,13 @@ $setting-transition-easing: ease-out;
   .vjs-settings-dialog {
     position: absolute;
     right: .5em;
-    bottom: 3.5em;
+    bottom: 4em;
     color: pvar(--embedForegroundColor);
     opacity: $primary-foreground-opacity;
     margin: 0 auto;
     font-size: $font-size !important;
     z-index: 100;
+    border-radius: 10px;
 
     width: auto;
     overflow: hidden;
@@ -54,11 +55,9 @@ $setting-transition-easing: ease-out;
 
     .vjs-settings-panel {
       position: absolute;
-      bottom: 0;
       right: 0;
       overflow-y: auto;
       overflow-x: hidden;
-      border-radius: 1px;
     }
 
     .vjs-settings-panel-child {
@@ -118,10 +117,10 @@ $setting-transition-easing: ease-out;
           outline: 0;
           font-weight: $font-semibold;
           text-align: end;
-          padding: 5px 8px;
+          padding: 8px 15px;
 
           &.vjs-back-button {
-            padding: 12px 8px;
+            padding: 12px 15px;
             margin-bottom: 5px;
             border-bottom: 1px solid #808080;
             text-align: start;
@@ -146,7 +145,7 @@ $setting-transition-easing: ease-out;
               @include icon(15px);
 
               position: absolute;
-              left: 8px;
+              left: 15px;
               content: ' ';
               margin-top: 1px;
               background-image: url('#{$assets-path}/player/images/tick-white.svg');
@@ -157,13 +156,14 @@ $setting-transition-easing: ease-out;
         // Special captions case
         // Bigger caption button
         &.vjs-captions-button {
-          width: 200px;
+          min-width: 200px;
 
           .vjs-menu-item {
             text-align: start;
 
             .vjs-menu-item-text {
               @include margin-left(25px);
+
               text-transform: capitalize;
             }
           }