fix(FEC-15083): Add right controls to xs player (#1198)

This fixes https://kaltura.atlassian.net/browse/FEC-15083

Author: valentinStoicaK

src/components/bottom-bar/_bottom-bar.scss

@@ -113,16 +113,6 @@
     }
   }
 
-  &.size-xs {
-    .bottom-bar {
-      .controls-container {
-        .right-controls {
-          display: none;
-        }
-      }
-    }
-  }
-
   &.size-xs,
   &.size-sm {
     .control-button-container:not(.upper-bar-icon) {

src/components/bottom-bar/bottom-bar-utils.ts

@@ -5,7 +5,11 @@ export function filterControlsByPriority(
   currentControlWidth: number,
   lowerPriorityControls: string[][]
 ): string[] {
-  const numOfOverflowControls = Math.ceil((currentMinBreakPointWidth - currentBarWidth) / currentControlWidth) || 1;
+  // Add 20% buffer to account for spacing/margins between controls
+  const overflow = currentMinBreakPointWidth - currentBarWidth;
+  const adjustedOverflow = overflow * 1.2;
+
+  const numOfOverflowControls = Math.ceil(adjustedOverflow / currentControlWidth) || 1;
   const controlsToRemove = lowerPriorityControls.flat().slice(0, numOfOverflowControls);
   const priorityPair: string[] = [...lowerPriorityControls].reverse().find(p => p.length > 1)!;
   if (controlsToRemove[controlsToRemove.length - 1] === priorityPair?.[0]) {