Merge pull request #911 from City-of-Helsinki/UHF-5532_column_gap_fixes

UHF-5532: Fixes issue with 4 cards not fitting side by side on the contact card listing
City-of-Helsinki · Feb 27, 2024 · 089d841 · 089d841
2 parents d33cb4e + 4b83259
commit 089d841
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/scss/06_components/paragraphs/_contact-card-listing.scss b/src/scss/06_components/paragraphs/_contact-card-listing.scss
@@ -20,7 +20,21 @@ $contact-card-bp: calc(($contact-card-max-width * 2) + ($component-side-padding-
     @include breakpoint($breakpoint-s) {
       max-width: none;
       min-width: min-content;
-      width: 25%;
+      // Substract the gaps between the cards so that exactly 4 cards fit side by side.
+      width: calc(25% - ($contact-card-gap * 0.75));
+    }
+  }
+}
+
+// The components upper region has a max-width limitation that makes it impossible to include
+// four 200px (contact card min-width) wide elements with 24px gap on same row so we need to adjust
+// the column gap on the listing when displayed on region.
+.components--upper .contact-card-listing--container {
+  column-gap: calc($contact-card-gap - $spacing-quarter);
+
+  .contact-card {
+    @include breakpoint($breakpoint-s) {
+      width: calc(25% - (($contact-card-gap - $spacing-quarter) * 0.75));
     }
   }
 }