Track page responsive fixes (#14130)

Made a few more adjustments to the compact track page view to make it
more compact + similar to mobile.

Author: julianbaker

packages/web/src/components/page/FlushPageContainer.tsx

@@ -6,16 +6,24 @@ import {
   PAGE_GUTTER_PX
 } from 'common/utils/layout'
 
-export const FlushPageContainer = (props: FlexProps) => {
-  const { children, ...flexProps } = props
+type FlushPageContainerProps = FlexProps & {
+  contentMinWidthPx?: number
+}
+
+export const FlushPageContainer = (props: FlushPageContainerProps) => {
+  const {
+    children,
+    contentMinWidthPx = MIN_PAGE_WIDTH_PX,
+    ...flexProps
+  } = props
   return (
     <Flex w='100%' flex='1 1 0' ph={PAGE_GUTTER_PX} {...flexProps}>
       <Flex
         flex='1'
         w='100%'
         css={{
           maxWidth: MAX_PAGE_WIDTH_PX,
-          minWidth: MIN_PAGE_WIDTH_PX,
+          minWidth: contentMinWidthPx,
           // Center content when viewport is wider than max content width
           // Left-align when viewport is narrower than max content width
           margin: '0 auto'

packages/web/src/components/track/GiantArtwork.module.css

@@ -1,8 +1,10 @@
 .giantArtwork {
   height: 338px;
   width: 338px;
-  min-height: 338px;
-  min-width: 338px;
+  min-height: 0;
+  min-width: 0;
+  max-height: 100%;
+  max-width: 100%;
   user-select: none;
 }
 
@@ -11,8 +13,10 @@
   border: 1px solid var(--harmony-n-100);
   overflow: hidden;
   position: relative;
-  width: 338px;
-  height: 338px;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
 }
 
 /* Empty artwork: subdued image icon on gray background (no skeleton) */

packages/web/src/components/track/GiantTrackTile.module.css

@@ -50,6 +50,10 @@
   justify-content: flex-end;
 }
 
+.badgesSectionCompact {
+  display: none;
+}
+
 .typeLabelCompact {
   display: none;
 }
@@ -58,6 +62,26 @@
   display: block;
 }
 
+.statsDesktop {
+  display: block;
+}
+
+.headerTrackStats :global([data-track-stat-label='social']) {
+  display: inline;
+}
+
+.statsInDescription {
+  display: none;
+}
+
+.listenCountDesktop {
+  display: block;
+}
+
+.playbackButton {
+  min-width: 0 !important;
+}
+
 .gatedContent .typeLabel {
   letter-spacing: 2px;
 }
@@ -203,11 +227,6 @@
   top: 2px;
 }
 
-.makePublicButton {
-  width: 166px;
-  flex-shrink: 0;
-}
-
 .downloadableIconContainer {
   margin-left: 10px;
   position: relative;
@@ -284,6 +303,12 @@
   }
 }
 
+@container (max-width: 856px) {
+  .headerTrackStats :global([data-track-stat-label='social']) {
+    display: none;
+  }
+}
+
 @container (max-width: 740px) {
   .topSection {
     grid-template-columns: 1fr;
@@ -298,13 +323,22 @@
     justify-content: center;
   }
 
+  .badgesSectionCompact {
+    display: flex;
+    grid-column: 1;
+    grid-row: 2;
+    justify-content: center;
+    gap: var(--harmony-unit-2);
+    flex-wrap: wrap;
+  }
+
   .typeLabelRow {
     display: none;
   }
 
   .artworkSection {
     grid-column: 1;
-    grid-row: 2;
+    grid-row: 3;
     justify-self: center;
     width: min(338px, 70cqi);
     aspect-ratio: 1;
@@ -317,14 +351,14 @@
     min-height: 0 !important;
   }
 
-  .artworkSection > div > div {
+  .artworkSection > div > :first-child {
     width: 100% !important;
     height: 100% !important;
   }
 
   .infoSection {
     grid-column: 1;
-    grid-row: 3;
+    grid-row: 4;
     align-items: center;
     width: 100%;
   }
@@ -350,6 +384,18 @@
     width: 100%;
   }
 
+  .statsDesktop {
+    display: none;
+  }
+
+  .statsInDescription {
+    display: block;
+  }
+
+  .listenCountDesktop {
+    display: none;
+  }
+
   .playSection {
     flex-wrap: wrap;
     justify-content: center;
@@ -364,9 +410,21 @@
     min-width: 0 !important;
   }
 
+  .playbackButton {
+    height: var(--harmony-unit-12) !important;
+    font-size: var(--harmony-font-l) !important;
+    line-height: var(--harmony-line-height-l) !important;
+    padding-inline: var(--harmony-unit-4) !important;
+  }
+
+  .playbackButton svg {
+    width: var(--harmony-unit-5) !important;
+    height: var(--harmony-unit-5) !important;
+  }
+
   .actionsSection {
     grid-column: 1;
-    grid-row: 4;
+    grid-row: 5;
     justify-self: stretch;
     width: 100%;
     flex-wrap: wrap;