Fix mobile web skeletons

packages/web/src/components/comments/CommentSectionMobile.tsx

@@ -66,7 +66,7 @@ const CommentSectionContent = () => {
     return (
       <Flex direction='row' gap='s' alignItems='center'>
         <Skeleton w={40} h={40} css={{ borderRadius: 100 }} />
-        <Flex gap='s'>
+        <Flex gap='s' direction='column'>
           <Skeleton h={20} w={240} />
           <Skeleton h={20} w={160} />
         </Flex>

packages/web/src/components/comments/CommentSkeletons.tsx

@@ -1,34 +1,29 @@
-import { Divider, Flex, Paper, Skeleton } from '@audius/harmony'
-
-import { CommentHeader } from './CommentHeader'
+import { Flex, Skeleton } from '@audius/harmony'
 
 const CommentBlockSkeleton = () => (
   <Flex direction='row' gap='s' alignItems='center' p='l'>
-    <Skeleton w={40} h={40} css={{ borderRadius: 100 }} />
-    <Flex gap='s'>
-      <Skeleton w={20} h={240} />
-      <Skeleton w={20} h={160} />
+    <Skeleton w={40} h={40} css={{ borderRadius: 100, flexShrink: 0 }} />
+    <Flex gap='s' direction='column'>
+      <Skeleton h={20} w={240} />
+      <Skeleton h={20} w={160} />
     </Flex>
   </Flex>
 )
 
 // TODO: mobile can also go in here
 export const CommentSkeletons = () => (
-  <Flex gap='l' direction='column' w='100%' alignItems='flex-start'>
-    <CommentHeader isLoading />
-    <Paper p='xl' w='100%' direction='column' gap='xl'>
-      <Flex
-        gap='s'
-        w='100%'
-        h='60px'
-        alignItems='center'
-        justifyContent='center'
-      >
-        <Skeleton w='40px' h='40px' css={{ borderRadius: '100%' }} />
-        <Skeleton w='100%' h='60px' />
-      </Flex>
-      <Divider color='default' orientation='horizontal' />
-      <CommentBlockSkeleton />
-    </Paper>
+  <Flex
+    gap='s'
+    direction='column'
+    w='100%'
+    h='100%'
+    alignItems='flex-start'
+    mt='s'
+  >
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
+    <CommentBlockSkeleton />
   </Flex>
 )

packages/web/src/pages/track-page/TrackCommentsPage.tsx

@@ -37,7 +37,10 @@ export const TrackCommentsPage = () => {
   return (
     <MobilePageContainer
       title={messages.title}
-      css={(theme) => ({ backgroundColor: theme.color.background.white })}
+      css={(theme) => ({
+        backgroundColor: theme.color.background.white,
+        height: '100%'
+      })}
     >
       {comments_disabled ? (
         <Flex p='2xl' justifyContent='center'>