fix: related videos title layout issue

jwplayer · Feb 22, 2024 · 361c58a · 361c58a
1 parent c4d09c5
commit 361c58a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/packages/ui-react/src/components/Filter/Filter.module.scss b/packages/ui-react/src/components/Filter/Filter.module.scss
@@ -14,6 +14,11 @@
 
 .dropDown {
   margin-bottom: 0;
+
+  label {
+    // hide the label and optional label
+    display: none;
+  }
 }
 
 .filterDropDown {

diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
@@ -68,11 +68,22 @@
 .relatedVideosList {
   grid-area: related;
   position: relative;
+
+  .relatedVideosListHeader {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$base-spacing;
+    margin-bottom: variables.$base-spacing;
+    padding-left: #{variables.$base-spacing * 1.5};
+
+    @include responsive.mobile-only() {
+      padding-left: 0;
+    }
+  }
 }
 
 .relatedVideos {
-  padding: 37px 56px 0;
-  padding-bottom: 16px;
+  padding: 37px 56px variables.$base-spacing;
 
   @include responsive.desktop-small-only() {
     padding: 34px;
@@ -83,7 +94,7 @@
   }
 
   @include responsive.mobile-only() {
-    padding: 16px;
+    padding: variables.$base-spacing;
   }
 }
 
@@ -92,14 +103,14 @@
   display: flex;
   align-items: center;
   height: 100%;
-  padding-bottom: 16px;
+  padding-bottom: variables.$base-spacing;
 
   &.inlineLayout {
     flex-direction: column;
     align-items: initial;
     width: 100%;
     grid-area: related;
-    padding-bottom: 0;
+    gap: variables.$base-spacing;
 
     > h3 {
       font-size: 20px;
@@ -121,7 +132,6 @@
 }
 
 .relatedVideosListTitle {
-  margin-left: 24px;
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 20px;
@@ -136,7 +146,6 @@
 }
 
 .filtersInline {
-  margin-bottom: variables.$base-spacing;
   padding-bottom: variables.$base-spacing;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }

diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx b/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
@@ -140,10 +140,10 @@ const VideoLayout: React.FC<Props> = ({
       <div className={styles.relatedVideosList}>
         <VideoList
           header={
-            <>
+            <div className={styles.relatedVideosListHeader}>
               {title && <h2 className={styles.relatedVideosListTitle}>{relatedTitle}</h2>}
               {hasFilters && renderFilters(true)}
-            </>
+            </div>
           }
           activeMediaId={item?.mediaid}
           activeLabel={activeLabel}