Bug 1965944 - Revert "Bug 1965944 - Visual updates for medium card UI. "

This reverts commit c94714433d. Differential Revision: https://phabricator.services.mozilla.com/D250596
2025-05-22 07:44:28 +00:00
parent 2db2c5fc49
commit b65e605dc6
9 changed files with 29 additions and 240 deletions
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx
@@ -31,7 +31,6 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
-const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
 const INTERSECTION_RATIO = 0.5;
 const VISIBLE = "visible";
 const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -362,8 +361,6 @@ export class _CardGrid extends React.PureComponent {
    const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED];
    const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED];
    const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED];
-    const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];
-
    // filter out recs that should be in ListFeed
    const recs = this.props.data.recommendations
      .filter(item => !item.feedName)
@@ -398,8 +395,8 @@ export class _CardGrid extends React.PureComponent {
            features={rec.features}
            showTopics={showTopics}
            selectedTopics={selectedTopics}
-            excerpt={refinedCardsLayout && rec.excerpt}
            availableTopics={availableTopics}
+            excerpt={rec.excerpt}
            url={rec.url}
            id={rec.id}
            shim={rec.shim}
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
@@ -7,20 +7,15 @@
    border-radius: var(--border-radius-medium);
    box-shadow: $shadow-card;

-    img,
-    .placeholder-image {
-      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+    .img-wrapper .img {
+      img,
+      .placeholder-image {
+        border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+      }
    }
  }
 }

-.ds-card.refined-cards:not(.placeholder) {
-  .img-wrapper .img {
-    height: 172px;
-    width: 100%;
-  }
-}
-
 .ds-onboarding-container {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
@@ -126,17 +121,14 @@
  display: grid;
  grid-gap: 24px;
  position: relative;
+  // Bug 1926056: Row/column Gap spacing to allow for IAB fixed ad sizes
+  row-gap: 24px;
+  column-gap: 18px;

  &.ds-card-grid-compact {
    grid-gap: 20px;
  }

-  &.ad-sizing-variant-a,
-  &.ad-sizing-variant-b {
-    row-gap: 24px;
-    column-gap: 18px;
-  }
-
  &.ds-card-grid-recent-saves {
    .ds-card {
      // Hide the second row orphan on narrow screens.
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx
@@ -32,9 +32,8 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
-const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";

-function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
+function getLayoutData(responsiveLayouts, index) {
  let layoutData = {
    classNames: [],
    imageSizes: {},
@@ -52,15 +51,7 @@ function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
        // The API tells us whether the tile should show the excerpt or not.
        // Apply extra styles accordingly.
        if (tile.hasExcerpt) {
-          if (tile.size === "medium" && refinedCardsLayout) {
-            layoutData.classNames.push(
-              `col-${layout.columnCount}-hide-excerpt`
-            );
-          } else {
-            layoutData.classNames.push(
-              `col-${layout.columnCount}-show-excerpt`
-            );
-          }
+          layoutData.classNames.push(`col-${layout.columnCount}-show-excerpt`);
        } else {
          layoutData.classNames.push(`col-${layout.columnCount}-hide-excerpt`);
        }
@@ -123,7 +114,6 @@ function CardSection({
  const mayHaveThumbsUpDown = prefs[PREF_THUMBS_UP_DOWN_ENABLED];
  const selectedTopics = prefs[PREF_TOPICS_SELECTED];
  const availableTopics = prefs[PREF_TOPICS_AVAILABLE];
-  const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];

  const { saveToPocketCard } = useSelector(state => state.DiscoveryStream);
  const mayHaveSectionsPersonalization =
@@ -270,8 +260,7 @@ function CardSection({
        {section.data.slice(0, maxTile).map((rec, index) => {
          const { classNames, imageSizes } = getLayoutData(
            responsiveLayouts,
-            index,
-            refinedCardsLayout
+            index
          );

          if (!rec || rec.placeholder) {
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss
@@ -5,21 +5,6 @@
  grid-column: span 1;
  padding: var(--space-large);

-  &.refined-cards.ds-card.sections-card-ui {
-    height: fit-content;
-  }
-
-  &.refined-cards {
-    .ds-card-link {
-      padding: var(--space-xsmall) var(--space-small);
-      flex-grow: 0;
-    }
-
-    .img-wrapper {
-      width: 110px;
-      height: 117px;
-    }
-  }

  &.ds-card.sections-card-ui {
    padding: unset;
@@ -36,6 +21,7 @@
    align-items: center;
    gap: var(--space-medium);
    padding: var(--space-large);
+
  }

  .img-wrapper {
@@ -91,6 +77,7 @@
  }
 }

+
@mixin section-card-medium {
  grid-row: span 2;
  grid-column: span 1;
@@ -99,23 +86,6 @@
  align-items: initial;
  gap: initial;

-  &.refined-cards.ds-card.sections-card-ui {
-    height: unset;
-  }
-
-  // .refined-medium-card only appears if refinedCardsLayout.enabled pref is set to true
-  &.refined-cards {
-    .ds-card-link {
-      padding: unset;
-      flex-grow: unset;
-    }
-
-    .img-wrapper {
-      width: 100%;
-      height: 172px;
-    }
-  }
-
  .card-stp-button-position-wrapper {
    inset-inline-end: 10px;
  }
@@ -150,8 +120,6 @@
    padding: var(--space-medium) var(--space-large);

    .info-wrap {
-      flex-grow: initial;
-
      .title {
        -webkit-line-clamp: 3;
        margin-block: 0 var(--space-small);
@@ -163,10 +131,6 @@
        -webkit-line-clamp: 3;
      }
    }
-
-    .sections-card-footer {
-      margin-top: auto;
-    }
  }
 }

@@ -189,14 +153,11 @@

      .img-wrapper {
        width: 265px;
-        height: 100%;
      }

      .ds-image.img {
        // Square ratio
        aspect-ratio: 1/1;
-        width: 100%;
-        height: 100%;

        img {
          border-radius: var(--border-radius-medium);
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
@@ -208,8 +208,6 @@ export class _DSCard extends React.PureComponent {
    this.onMenuShow = this.onMenuShow.bind(this);
    this.onThumbsUpClick = this.onThumbsUpClick.bind(this);
    this.onThumbsDownClick = this.onThumbsDownClick.bind(this);
-    const refinedCardsLayout =
-      this.props.Prefs.values["discoverystream.refinedCardsLayout.enabled"];

    this.setContextMenuButtonHostRef = element => {
      this.contextMenuButtonHostElement = element;
@@ -286,7 +284,7 @@ export class _DSCard extends React.PureComponent {
      },
      medium: {
        width: 300,
-        height: refinedCardsLayout ? 172 : 150,
+        height: 150,
      },
      large: {
        width: 265,
--- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -87,17 +87,12 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
    position: relative;
  }

-  &.refined-cards {
-    .card-stp-button-hover-background {
-      height: 172px;
-    }
-  }
-
  .card-stp-button-hover-background {
    opacity: 0;
    width: 100%;
    position: absolute;
    top: 0;
+    height: 0;
    transition: opacity;
    transition-duration: 0s;
    padding-block-start: 50%;
--- a/browser/extensions/newtab/css/activity-stream.css
+++ b/browser/extensions/newtab/css/activity-stream.css
@@ -4631,18 +4631,13 @@ main section {
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
-.ds-onboarding-container:not(.placeholder) img,
-.ds-onboarding-container:not(.placeholder) .placeholder-image,
-.ds-card-grid .ds-card:not(.placeholder) img,
-.ds-card-grid .ds-card:not(.placeholder) .placeholder-image {
+.ds-onboarding-container:not(.placeholder) .img-wrapper .img img,
+.ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image,
+.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img img,
+.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img .placeholder-image {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
 }

-.ds-card.refined-cards:not(.placeholder) .img-wrapper .img {
-  height: 172px;
-  width: 100%;
-}
-
 .ds-onboarding-container {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
@@ -4743,14 +4738,12 @@ main section {
  display: grid;
  grid-gap: 24px;
  position: relative;
+  row-gap: 24px;
+  column-gap: 18px;
 }
 .ds-card-grid.ds-card-grid-compact {
  grid-gap: 20px;
 }
-.ds-card-grid.ad-sizing-variant-a, .ds-card-grid.ad-sizing-variant-b {
-  row-gap: 24px;
-  column-gap: 18px;
-}
@media (min-width: 610px) and (max-width: 866px) {
  .ds-card-grid.ds-card-grid-recent-saves .ds-card:last-child:nth-child(2n-1) {
    display: none;
@@ -5201,17 +5194,6 @@ main section {
    grid-column: span 1;
    padding: var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-1-small.refined-cards.ds-card.sections-card-ui {
-    height: fit-content;
-  }
-  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .ds-card-link {
-    padding: var(--space-xsmall) var(--space-small);
-    flex-grow: 0;
-  }
-  .ds-section-grid.ds-card-grid .col-1-small.refined-cards .img-wrapper {
-    width: 110px;
-    height: 117px;
-  }
  .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui {
    padding: unset;
  }
@@ -5275,17 +5257,6 @@ main section {
    align-items: initial;
    gap: initial;
  }
-  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-card.sections-card-ui {
-    height: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .ds-card-link {
-    padding: unset;
-    flex-grow: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .img-wrapper {
-    width: 100%;
-    height: 172px;
-  }
  .ds-section-grid.ds-card-grid .col-1-medium .card-stp-button-position-wrapper {
    inset-inline-end: 10px;
  }
@@ -5311,9 +5282,6 @@ main section {
  .ds-section-grid.ds-card-grid .col-1-medium .meta {
    padding: var(--space-medium) var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap {
-    flex-grow: initial;
-  }
  .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .title {
    -webkit-line-clamp: 3;
    margin-block: 0 var(--space-small);
@@ -5323,9 +5291,6 @@ main section {
    display: block;
    -webkit-line-clamp: 3;
  }
-  .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer {
-    margin-top: auto;
-  }
  .ds-section-grid.ds-card-grid .col-1-large {
    grid-row: span 2;
    grid-column: span 2;
@@ -5342,12 +5307,9 @@ main section {
  }
  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper {
    width: 265px;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img {
    aspect-ratio: 1/1;
-    width: 100%;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img img {
    border-radius: var(--border-radius-medium);
@@ -5410,17 +5372,6 @@ main section {
    grid-column: span 1;
    padding: var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-2-small.refined-cards.ds-card.sections-card-ui {
-    height: fit-content;
-  }
-  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .ds-card-link {
-    padding: var(--space-xsmall) var(--space-small);
-    flex-grow: 0;
-  }
-  .ds-section-grid.ds-card-grid .col-2-small.refined-cards .img-wrapper {
-    width: 110px;
-    height: 117px;
-  }
  .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui {
    padding: unset;
  }
@@ -5484,17 +5435,6 @@ main section {
    align-items: initial;
    gap: initial;
  }
-  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-card.sections-card-ui {
-    height: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .ds-card-link {
-    padding: unset;
-    flex-grow: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .img-wrapper {
-    width: 100%;
-    height: 172px;
-  }
  .ds-section-grid.ds-card-grid .col-2-medium .card-stp-button-position-wrapper {
    inset-inline-end: 10px;
  }
@@ -5520,9 +5460,6 @@ main section {
  .ds-section-grid.ds-card-grid .col-2-medium .meta {
    padding: var(--space-medium) var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap {
-    flex-grow: initial;
-  }
  .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .title {
    -webkit-line-clamp: 3;
    margin-block: 0 var(--space-small);
@@ -5532,9 +5469,6 @@ main section {
    display: block;
    -webkit-line-clamp: 3;
  }
-  .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer {
-    margin-top: auto;
-  }
  .ds-section-grid.ds-card-grid .col-2-large {
    grid-row: span 2;
    grid-column: span 2;
@@ -5551,12 +5485,9 @@ main section {
  }
  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper {
    width: 265px;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img {
    aspect-ratio: 1/1;
-    width: 100%;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img img {
    border-radius: var(--border-radius-medium);
@@ -5620,17 +5551,6 @@ main section {
    grid-column: span 1;
    padding: var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-3-small.refined-cards.ds-card.sections-card-ui {
-    height: fit-content;
-  }
-  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .ds-card-link {
-    padding: var(--space-xsmall) var(--space-small);
-    flex-grow: 0;
-  }
-  .ds-section-grid.ds-card-grid .col-3-small.refined-cards .img-wrapper {
-    width: 110px;
-    height: 117px;
-  }
  .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui {
    padding: unset;
  }
@@ -5694,17 +5614,6 @@ main section {
    align-items: initial;
    gap: initial;
  }
-  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-card.sections-card-ui {
-    height: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .ds-card-link {
-    padding: unset;
-    flex-grow: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .img-wrapper {
-    width: 100%;
-    height: 172px;
-  }
  .ds-section-grid.ds-card-grid .col-3-medium .card-stp-button-position-wrapper {
    inset-inline-end: 10px;
  }
@@ -5730,9 +5639,6 @@ main section {
  .ds-section-grid.ds-card-grid .col-3-medium .meta {
    padding: var(--space-medium) var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap {
-    flex-grow: initial;
-  }
  .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .title {
    -webkit-line-clamp: 3;
    margin-block: 0 var(--space-small);
@@ -5742,9 +5648,6 @@ main section {
    display: block;
    -webkit-line-clamp: 3;
  }
-  .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer {
-    margin-top: auto;
-  }
  .ds-section-grid.ds-card-grid .col-3-large {
    grid-row: span 2;
    grid-column: span 2;
@@ -5761,12 +5664,9 @@ main section {
  }
  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper {
    width: 265px;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img {
    aspect-ratio: 1/1;
-    width: 100%;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img img {
    border-radius: var(--border-radius-medium);
@@ -5829,17 +5729,6 @@ main section {
    grid-column: span 1;
    padding: var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-4-small.refined-cards.ds-card.sections-card-ui {
-    height: fit-content;
-  }
-  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .ds-card-link {
-    padding: var(--space-xsmall) var(--space-small);
-    flex-grow: 0;
-  }
-  .ds-section-grid.ds-card-grid .col-4-small.refined-cards .img-wrapper {
-    width: 110px;
-    height: 117px;
-  }
  .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui {
    padding: unset;
  }
@@ -5903,17 +5792,6 @@ main section {
    align-items: initial;
    gap: initial;
  }
-  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-card.sections-card-ui {
-    height: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .ds-card-link {
-    padding: unset;
-    flex-grow: unset;
-  }
-  .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .img-wrapper {
-    width: 100%;
-    height: 172px;
-  }
  .ds-section-grid.ds-card-grid .col-4-medium .card-stp-button-position-wrapper {
    inset-inline-end: 10px;
  }
@@ -5939,9 +5817,6 @@ main section {
  .ds-section-grid.ds-card-grid .col-4-medium .meta {
    padding: var(--space-medium) var(--space-large);
  }
-  .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap {
-    flex-grow: initial;
-  }
  .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .title {
    -webkit-line-clamp: 3;
    margin-block: 0 var(--space-small);
@@ -5951,9 +5826,6 @@ main section {
    display: block;
    -webkit-line-clamp: 3;
  }
-  .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer {
-    margin-top: auto;
-  }
  .ds-section-grid.ds-card-grid .col-4-large {
    grid-row: span 2;
    grid-column: span 2;
@@ -5970,12 +5842,9 @@ main section {
  }
  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper {
    width: 265px;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img {
    aspect-ratio: 1/1;
-    width: 100%;
-    height: 100%;
  }
  .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img img {
    border-radius: var(--border-radius-medium);
@@ -6488,14 +6357,12 @@ main section {
  width: 100%;
  position: relative;
 }
-.ds-card.refined-cards .card-stp-button-hover-background {
-  height: 172px;
-}
 .ds-card .card-stp-button-hover-background {
  opacity: 0;
  width: 100%;
  position: absolute;
  top: 0;
+  height: 0;
  transition: opacity;
  transition-duration: 0s;
  padding-block-start: 50%;
--- a/browser/extensions/newtab/data/content/activity-stream.bundle.js
+++ b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -3618,7 +3618,6 @@ class _DSCard extends (external_React_default()).PureComponent {
    this.onMenuShow = this.onMenuShow.bind(this);
    this.onThumbsUpClick = this.onThumbsUpClick.bind(this);
    this.onThumbsDownClick = this.onThumbsDownClick.bind(this);
-    const refinedCardsLayout = this.props.Prefs.values["discoverystream.refinedCardsLayout.enabled"];
    this.setContextMenuButtonHostRef = element => {
      this.contextMenuButtonHostElement = element;
    };
@@ -3679,7 +3678,7 @@ class _DSCard extends (external_React_default()).PureComponent {
      },
      medium: {
        width: 300,
-        height: refinedCardsLayout ? 172 : 150
+        height: 150
      },
      large: {
        width: 265,
@@ -4905,7 +4904,6 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
-const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
 const CardGrid_INTERSECTION_RATIO = 0.5;
 const CardGrid_VISIBLE = "visible";
 const CardGrid_VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -5189,8 +5187,6 @@ class _CardGrid extends (external_React_default()).PureComponent {
    const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED];
    const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED];
    const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED];
-    const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];
-
    // filter out recs that should be in ListFeed
    const recs = this.props.data.recommendations.filter(item => !item.feedName).slice(0, items);
    const cards = [];
@@ -5214,8 +5210,8 @@ class _CardGrid extends (external_React_default()).PureComponent {
        features: rec.features,
        showTopics: showTopics,
        selectedTopics: selectedTopics,
-        excerpt: refinedCardsLayout && rec.excerpt,
        availableTopics: availableTopics,
+        excerpt: rec.excerpt,
        url: rec.url,
        id: rec.id,
        shim: rec.shim,
@@ -11237,8 +11233,7 @@ const CardSections_PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const CardSections_PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const CardSections_PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const CardSections_PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
-const CardSections_PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
-function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
+function getLayoutData(responsiveLayouts, index) {
  let layoutData = {
    classNames: [],
    imageSizes: {}
@@ -11253,11 +11248,7 @@ function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
        // The API tells us whether the tile should show the excerpt or not.
        // Apply extra styles accordingly.
        if (tile.hasExcerpt) {
-          if (tile.size === "medium" && refinedCardsLayout) {
-            layoutData.classNames.push(`col-${layout.columnCount}-hide-excerpt`);
-          } else {
-            layoutData.classNames.push(`col-${layout.columnCount}-show-excerpt`);
-          }
+          layoutData.classNames.push(`col-${layout.columnCount}-show-excerpt`);
        } else {
          layoutData.classNames.push(`col-${layout.columnCount}-hide-excerpt`);
        }
@@ -11312,7 +11303,6 @@ function CardSection({
  const mayHaveThumbsUpDown = prefs[CardSections_PREF_THUMBS_UP_DOWN_ENABLED];
  const selectedTopics = prefs[CardSections_PREF_TOPICS_SELECTED];
  const availableTopics = prefs[CardSections_PREF_TOPICS_AVAILABLE];
-  const refinedCardsLayout = prefs[CardSections_PREF_REFINED_CARDS_ENABLED];
  const {
    saveToPocketCard
  } = (0,external_ReactRedux_namespaceObject.useSelector)(state => state.DiscoveryStream);
@@ -11441,7 +11431,7 @@ function CardSection({
    const {
      classNames,
      imageSizes
-    } = getLayoutData(responsiveLayouts, index, refinedCardsLayout);
+    } = getLayoutData(responsiveLayouts, index);
    if (!rec || rec.placeholder) {
      return /*#__PURE__*/external_React_default().createElement(PlaceholderDSCard, {
        key: `dscard-${index}`
--- a/browser/extensions/newtab/karma.mc.config.js
+++ b/browser/extensions/newtab/karma.mc.config.js
@@ -231,7 +231,7 @@ module.exports = function (config) {
              },
            "content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx":
              {
-                statements: 84.43,
+                statements: 84.55,
                lines: 84.03,
                functions: 79.31,
                branches: 53.62,