From 19e9b4fa1339aa2c817ad66fd1ebafe5eadabb06 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Wed, 11 Dec 2024 19:24:59 -0500 Subject: [PATCH] fix(content-group-cards): fix alignment (#12160) ### Related Ticket(s) Closes # https://jsw.ibm.com/browse/ADCMS-7030 ### Description In medium resolution, the cards are having an undesired horizontal overflow that was causing a scroll bar to appear. I made a fix that will make them span full width, that's the behavior we have in the [v2 builds I found](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11248/index.html?path=/story/overview-getting-started--page) for example, that came [from this issue](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/11248) Fixed as per this PR: ![image](https://github.com/user-attachments/assets/5e61977f-e88b-4416-9d74-7c0594cd20a4) ### Changelog **New** setting `margin-inline-start` to be 0 in resolutions lower than LG. --- .../components/content-group-cards/_content-group-cards.scss | 1 - packages/styles/scss/internal/content-block/_content-block.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss index 3502194b6f1..76fe8147c90 100644 --- a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss +++ b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss @@ -38,7 +38,6 @@ .#{$prefix}--content-group-cards__row { display: grid; - margin-inline: -$spacing-05; @include breakpoint(md) { grid-auto-rows: 1fr; diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss index c2071965851..c805c0feb7d 100644 --- a/packages/styles/scss/internal/content-block/_content-block.scss +++ b/packages/styles/scss/internal/content-block/_content-block.scss @@ -87,6 +87,7 @@ ::slotted(#{$c4d-prefix}-content-group:not([slot])), ::slotted(#{$c4d-prefix}-cta-block-item-row:not([slot])), + ::slotted(#{$c4d-prefix}-content-group-cards-item:not([slot])), ::slotted([data-autoid^='c4d--tabs-']:not([slot])), ::slotted([data-autoid^='c4d--card']:not([slot])) { margin-inline-start: 0;