[PE-6071] Overflow: hidden on remix contest info section (#11961)

Author: dharit-tan

packages/web/src/pages/track-page/components/desktop/RemixContestDetailsTab.tsx

@@ -37,14 +37,7 @@ export const RemixContestDetailsTab = ({
   const isContestEnded = dayjs(remixContest?.endDate).isBefore(dayjs())
 
   return (
-    <Flex
-      column
-      gap='l'
-      p='xl'
-      css={{
-        transition: 'height var(--harmony-expressive)'
-      }}
-    >
+    <Flex column gap='l' p='xl'>
       <Flex row gap='s'>
         <Text variant='title' size='m' color='accent'>
           {messages.due}

packages/web/src/pages/track-page/components/desktop/RemixContestSection.tsx

@@ -9,6 +9,7 @@ import {
   Flex,
   IconCloudUpload,
   IconTrophy,
+  motion,
   spacing,
   Text
 } from '@audius/harmony'
@@ -107,13 +108,7 @@ export const RemixContestSection = ({
   const totalBoxHeight = TAB_BAR_HEIGHT + contentHeight
 
   return (
-    <Flex
-      column
-      gap='l'
-      css={{
-        transition: 'height var(--harmony-expressive)'
-      }}
-    >
+    <Flex column gap='l'>
       <Flex alignItems='center' gap='s'>
         <IconTrophy color='default' />
         <Text variant='title' size='l'>
@@ -125,7 +120,8 @@ export const RemixContestSection = ({
         shadow='mid'
         borderRadius='l'
         css={{
-          transition: 'height var(--harmony-expressive)',
+          transition: motion.quick,
+          overflow: 'hidden',
           height: totalBoxHeight
         }}
       >
@@ -147,14 +143,7 @@ export const RemixContestSection = ({
               <Flex h={spacing.m + spacing['2xl']} />
             )}
           </Flex>
-          <Box
-            css={{
-              transition: 'height var(--harmony-expressive)',
-              height: contentHeight
-            }}
-          >
-            {ContentBody}
-          </Box>
+          {ContentBody}
         </Flex>
       </Box>
     </Flex>