Move overflow margin into CSS

bitmovin · Dec 19, 2024 · 8b12637 · 8b12637
1 parent 935380a
commit 8b12637
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/scss/skin-modern/components/_seekbarlabel.scss b/src/scss/skin-modern/components/_seekbarlabel.scss
@@ -21,6 +21,9 @@
 
   > .#{$prefix}-container-wrapper {
     @extend %center-on-left-edge;
+
+    padding-left: 1em;
+    padding-right: 1em;
   }
 
   // bottom arrow from http://www.cssarrowplease.com/

diff --git a/src/ts/components/seekbarlabel.ts b/src/ts/components/seekbarlabel.ts
@@ -141,16 +141,14 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
       'left': seekPositionPx + 'px',
     });
 
-    // TODO move into CSS
-    const overflowMargin = 8;
-
-    const labelBounding = this.container.getDomElement().get(0).getBoundingClientRect();
+    // Check parent container as it has a padding that needs to be considered
+    const labelBounding = this.container.getDomElement().get(0).parentElement.getBoundingClientRect();
 
     let preventOverflowOffset = 0;
-    if (labelBounding.right + overflowMargin > bounds.right) {
-      preventOverflowOffset = labelBounding.right - bounds.right + overflowMargin;
-    } else if (labelBounding.left - overflowMargin < bounds.left) {
-      preventOverflowOffset = labelBounding.left - bounds.left - overflowMargin;
+    if (labelBounding.right > bounds.right) {
+      preventOverflowOffset = labelBounding.right - bounds.right;
+    } else if (labelBounding.left < bounds.left) {
+      preventOverflowOffset = labelBounding.left - bounds.left;
     }
 
     if (preventOverflowOffset !== 0) {