Fix Bug 1508431 - Update new tab breakpoints for better content layouts (#4577)

Fix Bug 1508431 - Update new tab breakpoints for better content layouts (#4577)

content-src/components/CollapsibleSection/CollapsibleSection.jsx

@@ -148,7 +148,7 @@ export class _CollapsibleSection extends React.PureComponent {
               <span className="click-target" onClick={this.onHeaderClick}>
                 {isCollapsible && <span className={`collapsible-arrow icon ${collapsed ? "icon-arrowhead-forward-small" : "icon-arrowhead-down-small"}`} />}
               </span>
-              <span>
+              <span className="learn-more-link-wrapper">
                 {learnMore &&
                   <span className="learn-more-link">
                     <a href={learnMore.link.href}>

content-src/components/CollapsibleSection/_CollapsibleSection.scss

@@ -17,6 +17,20 @@
     }
 
     .click-target-container {
+      // Center "How it works" for "mobile" viewport
+      @media (max-width: $break-point-medium - 1) {
+        display: block;
+
+        .learn-more-link-wrapper {
+          display: block;
+          text-align: center;
+
+          .learn-more-link {
+            margin-inline-start: 0;
+          }
+        }
+      }
+
       vertical-align: top;
 
       .click-target {
@@ -128,4 +142,12 @@
       overflow: hidden;
     }
   }
+
+  // Hide first story card for the medium breakpoint to prevent orphaned third story
+  &[data-section-id='topstories'] .card-outer:first-child {
+    @media (min-width: $break-point-medium) and (max-width: $break-point-large - 1) {
+      display: none;
+    }
+  }
 }
+

content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss

@@ -3,9 +3,11 @@
   $min-button-height: 18px;
   font-size: 13px;
   margin-inline-end: 20px;
-  display: inline-block;
+  display: flex;
+  align-items: flex-start;
 
   .pocket-cta-button {
+    white-space: nowrap;
     background: $blue-60;
     letter-spacing: -0.34px;
     color: $white;

content-src/components/Sections/Sections.jsx

@@ -248,11 +248,19 @@ export class Section extends React.PureComponent {
           </div>}
         {id === "topstories" &&
           <div className="top-stories-bottom-container">
-            <div>
-              {shouldShowTopics && <Topics topics={this.props.topics} />}
-              {shouldShowPocketCta && <PocketLoggedInCta />}
-            </div>
-            <div>
+            {shouldShowTopics &&
+              <div className="wrapper-topics">
+                <Topics topics={this.props.topics} />
+              </div>
+            }
+
+            {shouldShowPocketCta &&
+              <div className="wrapper-cta">
+                <PocketLoggedInCta />
+              </div>
+            }
+
+            <div className="wrapper-more-recommendations">
               {shouldShowReadMore &&
                 <MoreRecommendations read_more_endpoint={read_more_endpoint} />}
             </div>

content-src/components/Sections/_Sections.scss

@@ -84,6 +84,43 @@
       font-size: 13px;
     }
   }
+
+  .wrapper-topics,
+  .wrapper-cta + .wrapper-more-recommendations {
+    @media (max-width: $break-point-large - 1) {
+      display: none;
+    }
+  }
+
+  @media (max-width: $break-point-medium - 1) {
+    .wrapper-cta {
+      text-align: center;
+
+      .pocket-logged-in-cta {
+        display: block;
+        margin-inline-end: 0;
+
+        .pocket-cta-button {
+          max-width: none;
+          display: block;
+          margin-inline-end: 0;
+          margin: 5px 0 10px;
+        }
+      }
+    }
+
+    .wrapper-more-recommendations {
+      width: 100%;
+
+      .more-recommendations {
+        justify-content: center;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 @media (min-width: $break-point-widest) {

content-src/styles/_variables.scss

@@ -96,6 +96,8 @@ $wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $section-horizont
 // layout issues when the scrollbar is visible. 16px is wide enough to cover all
 // OSes and keeps it simpler than a per-OS value.
 $scrollbar-width: 16px;
+
+// Breakpoints
 $break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width;
 $break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width;
 $break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width;