style(#ott2821): min style fixes

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

@@ -20,6 +20,7 @@ import {
   ItemText,
   MainCheckboxContainer,
   PopupContainer,
+  PopupInner,
   PopupHeader,
   Button,
   ButtonConatiner,
@@ -67,6 +68,7 @@ export const FiltersPopup = () => {
 
   return (
     <PopupContainer>
+      <PopupInner>
         <CloseButtonContainer>
           <CloseButton onClick={closePopup} />
         </CloseButtonContainer>
@@ -135,6 +137,7 @@ export const FiltersPopup = () => {
             )))}
           </ItemsContainer>
         </PartBlock>
+      </PopupInner>
       <ButtonConatiner>
         <Button onClick={applyFilters}>
           <T9n t='apply_filter' />

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

@@ -15,14 +15,11 @@ export const PopupContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: absolute;
-  overflow-y: auto;
   z-index: 1000;
   height: 100%;
   right: 0;
   top: 0;
 
-  ${customScrollbar}
-
   ${isMobileDevice
     ? css`
       position: fixed;
@@ -34,6 +31,13 @@ export const PopupContainer = styled.div`
       width: 651px;`}
 `
 
+export const PopupInner = styled.div`
+  max-height: 100%;
+  height: 100%;
+  overflow-y: auto;
+  ${customScrollbar}
+`
+
 export const PopupHeader = styled.div`
   flex: 0 0 auto;
   ${isMobileDevice
@@ -62,8 +66,8 @@ export const HeaderText = styled.div`
   font-style: normal;
   font-weight: 700;
   text-transform: uppercase;
+  color: #fff;
 
-  color: #FFFFFF;
   ${isMobileDevice
     ? css`
     font-size: 12px;
@@ -192,6 +196,9 @@ export const Button = styled.button`
     width: 167px;`}
 `
 export const PlayerNumber = styled.span`
+  /* color: #ADADAD; */
+  color: rgba(255, 255, 255,  0.7);
+  /* letter-spacing: -0.078px; */
   margin-right: 8px;
   font-size: 11px;
   line-height: 16px;

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

@@ -240,12 +240,11 @@ export const ButtonsBlock = styled.div`
 
 export const HoverTooltip = styled.span`
   display: flex;
-  background: #FFFFFF;
+  background: #fff;
   border-radius: 6px;
   left: 8px;
   top: 30px;
   transform: translate(-100%, -50%);
-  font-weight: 600;
   font-size: 15px;
   text-align: center;
   flex-direction: column;
@@ -253,9 +252,11 @@ export const HoverTooltip = styled.span`
   justify-content: center;
   align-items: center;
   min-width: 160px;
-  height: 21px;
+  width: max-content;
+  line-height: 21px;
+  padding: 0 9px;
   text-decoration: none;
-  color: #000000;
+  color: #000;
   opacity: 0;
   transition: all 0.1s ease;
   pointer-events: none;
@@ -289,6 +290,7 @@ export const Filters = styled.span<TFilters>`
 
 export const SelectedEpisodes = styled.div`
   display: flex;
+  align-items: center;
   gap: 18px;
 `