feat(in-537): match progressbar fixes

src/features/MatchPage/components/MatchDescription/styled.tsx

@@ -11,7 +11,7 @@ export const Description = styled.div<{isHidden?: boolean}>`
 
   ${isMobileDevice
     ? css`
-        padding: 0 5px;
+        padding: 0 15px;
         align-items: baseline;
       `
     : ''};
@@ -24,8 +24,6 @@ export const Description = styled.div<{isHidden?: boolean}>`
 `
 
 export const DescriptionInnerBlock = styled.div`
-  margin-right: 10px;
-  
   ${isMobileDevice ? css`
     width: 100%;
   ` : ''}

src/features/MatchSidePlaylists/styled.tsx

@@ -30,9 +30,11 @@ export const Wrapper = styled.div<WrapperProps>`
     ? css`
       overflow-y: auto;
       width: 100%;
-      padding-right: 0;
+      padding: 10px 10px 0;
 
-      ${customScrollbar}
+      ::-webkit-scrollbar {
+        display: none;
+      }
     `
     : ''};
 

src/features/MultiSourcePlayer/components/ProgressBar/index.tsx

@@ -41,7 +41,6 @@ export const ProgressBar = (props: ProgressBarProps) => {
       {isScrubberVisible && (
         <ScrubberContainer>
           <Scrubber
-            isIOS={isIOS}
             style={{ left: `${playedProgressInPercent}%` }}
           >
             <TimeTooltip time={time} />

src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx

@@ -15,7 +15,7 @@ export const Controls = styled.div<FullscreenProps>`
   flex-direction: column;
   align-items: center;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-  bottom: ${({ isFullscreen }) => (isFullscreen ? '20px' : 0)};
+  bottom: ${({ isFullscreen }) => (isFullscreen ? '20px' : '-3px')};
   
   @media (orientation: landscape){
     width: 100%;

src/features/StreamPlayer/components/ProgressBar/index.tsx

@@ -2,8 +2,6 @@ import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
 import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
 import { Scrubber, ScrubberContainer } from 'features/StreamPlayer/components/ProgressBar/styled'
 
-import { isIOS } from 'config/userAgent'
-
 import { Chapters } from '../Chapters'
 import type { Props } from './hooks'
 import { useProgressBar } from './hooks'
@@ -20,13 +18,11 @@ export const ProgressBar = (props: Props) => {
   return (
     <ProgressBarList
       ref={progressBarRef}
-      isIOS={isIOS}
     >
       <Chapters chapters={calculatedChapters} />
       {isScrubberVisible && (
         <ScrubberContainer>
           <Scrubber
-            isIOS={isIOS}
             style={{ left: `${playedProgressInPercent}%` }}
           >
             <TimeTooltip time={time} />

src/features/StreamPlayer/components/ProgressBar/styled.tsx

@@ -4,7 +4,7 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { Wrapper } from '../TimeTooltip/styled'
 
-export const ProgressBarList = styled.div<{isIOS?: boolean}>`
+export const ProgressBarList = styled.div`
   flex-grow: 1;
   height: 4px;
   position: relative;
@@ -13,16 +13,12 @@ export const ProgressBarList = styled.div<{isIOS?: boolean}>`
 
   ${isMobileDevice
     ? css`
-      height: 1px;
+      height: 3px;
+      margin: 0 15px;
     `
     : ''}
-
-  ${({ isIOS }) => (isIOS && isMobileDevice
-      && css`
-        height: 3px;
-        margin: 0 24px;
-    `)}
 `
+
 export const ScrubberContainer = styled.div`
   ${isMobileDevice
     ? css`
@@ -30,10 +26,9 @@ export const ScrubberContainer = styled.div`
         margin: 0 7px;
       `
     : ''}
-  
 `
 
-export const Scrubber = styled.div<{isIOS?: boolean}>`
+export const Scrubber = styled.div`
   border: none;
   outline: none;
   position: absolute;
@@ -54,18 +49,10 @@ export const Scrubber = styled.div<{isIOS?: boolean}>`
 
   ${isMobileDevice
     ? css`
-      width: 14px;
-      height: 14px;
       background-color: #FFFFFF;
-      transform: translate(-50%, -48%);
-    `
-    : ''}
-
-  ${({ isIOS }) => (isIOS && isMobileDevice
-    ? css`
-      width: 30px;
-      height: 30px;
+      width: 27px;
+      height: 27px;
       transform: translate(-50%, -53%);
     `
-    : '')}
+    : ''}
 `