fix(ott-2850): add dynamic padding

src/features/MatchSidePlaylists/components/TabVideo/index.tsx

@@ -19,6 +19,7 @@ import { usePageParams } from 'hooks/usePageParams'
 
 import { VideoDate } from './components/VideoDate'
 import { MatchesWrapper } from './styled'
+import { useScroll } from '../../useScroll'
 
 type Props = {
   profile: MatchInfo,
@@ -39,6 +40,8 @@ export const TabVideo = ({
 
   const [selectedDate, setSelectedDate] = useState(profileDate)
 
+  const { hasScroll, ref } = useScroll([selectedDate])
+
   const matches = useMemo(() => (
     tournamentData.matches.filter((match) => (
       formatDate(match.date) === selectedDate && match.id !== profileId
@@ -70,7 +73,10 @@ export const TabVideo = ({
         profileDate={profileDate}
         onDateClick={setSelectedDate}
       />
-      <MatchesWrapper>
+      <MatchesWrapper
+        hasScroll={hasScroll}
+        ref={ref}
+      >
         {
           map(sortBy(matches, ({ live }) => !live), (match) => (
             <MatchCard

src/features/MatchSidePlaylists/components/TabVideo/styled.tsx

@@ -2,10 +2,14 @@ import styled, { css } from 'styled-components/macro'
 import { customScrollbar } from 'features/Common'
 import { isMobileDevice } from '../../../../config/userAgent'
 
-export const MatchesWrapper = styled.div`
+type TMatchesWrapper = {
+  hasScroll: boolean,
+}
+
+export const MatchesWrapper = styled.div<TMatchesWrapper>`
   overflow-y: auto;
   max-height: calc(100vh - 170px);
-  padding-right: 5px;
+  ${({ hasScroll }) => (hasScroll ? css`padding-right: 5px;` : '')}
 
   > * {
     margin-bottom: 15px;

src/features/MatchSidePlaylists/index.tsx

@@ -14,6 +14,7 @@ import { TabEvents } from './components/TabEvents'
 import { TabWatch } from './components/TabWatch'
 import { TabVideo } from './components/TabVideo'
 import { useMatchSidePlaylists } from './hooks'
+import { useScroll } from './useScroll'
 import {
   Wrapper,
   TabsWrapper,
@@ -53,6 +54,11 @@ export const MatchSidePlaylists = ({
 
   const TabPane = tabPanes[selectedTab]
 
+  const { hasScroll, ref } = useScroll([
+    playlists,
+    selectedTab,
+  ])
+
   const containerRef = useRef<HTMLDivElement | null>(null)
 
   useEventListener({
@@ -101,7 +107,11 @@ export const MatchSidePlaylists = ({
         </TabsGroup>
 
       </TabsWrapper>
-      <Container forVideoTab={selectedTab === Tabs.VIDEO}>
+      <Container
+        hasScroll={hasScroll}
+        ref={ref}
+        forVideoTab={selectedTab === Tabs.VIDEO}
+      >
         <TabPane
           tournamentData={tournamentData}
           onSelect={onSelect}

src/features/MatchSidePlaylists/styled.tsx

@@ -29,28 +29,20 @@ export const TabsWrapper = styled.div`
 
 type TContainer = {
   forVideoTab?: boolean,
+  hasScroll: boolean,
 }
 
 export const Container = styled.div<TContainer>`
   width: 320px;
   margin-top: 14px;
-  padding: 0 18px 0 14px;
+  padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')};
   max-height: calc(100vh - 130px);
   overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
 
   ${customScrollbar}
 
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
   @media ${devices.tablet} {
     margin-top: 15px;
-    padding: 0 10px 0 14px;
-
-    ::-webkit-scrollbar {
-      display: initial;
-    }
   }
 
   ${isMobileDevice

src/features/MatchSidePlaylists/useScroll.tsx

@@ -0,0 +1,27 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+export const useScroll = (deps: any) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const [hasRefScroll, setRefScroll] = useState(false)
+
+  useEffect(() => {
+    const {
+      clientHeight = 0,
+      scrollHeight = 0,
+    } = ref.current || {}
+    const hasScroll = scrollHeight > clientHeight
+
+    setRefScroll(hasScroll)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, ...deps])
+
+  return {
+    hasScroll: hasRefScroll,
+    ref,
+  }
+}