refactor: adjust breadcrumbs margin (#701)

refactor: adjust details padding
cds-snc · Dec 11, 2024 · 9ea1447 · 9ea1447
1 parent 4386ec9
commit 9ea1447
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -45,7 +45,7 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
-    "@cdssnc/gcds-tokens": "^2.0.0",
+    "@cdssnc/gcds-tokens": "^2.0.1",
     "@fortawesome/fontawesome-free": "^6.3.0",
     "@stencil/angular-output-target": "file:../../utils/angular-output-target",
     "@stencil/postcss": "^2.1.0",

diff --git a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css
@@ -18,7 +18,10 @@
 @layer default {
   :host(.gcds-breadcrumbs-item) {
     position: relative;
-    margin: var(--gcds-breadcrumbs-item-margin) !important;
+
+    @media screen and (width >= 30rem) {
+      margin: var(--gcds-breadcrumbs-item-margin) !important;
+    }
 
     &:before {
       position: relative;
@@ -30,7 +33,7 @@
 
 /* Note: mobile specific style decision */
 @layer mobile {
-  @media screen and (max-width: 30rem) {
+  @media screen and (width < 30rem) {
     :host(.gcds-breadcrumbs-item) {
       display: block;
       margin: var(--gcds-breadcrumbs-mobile-item-margin) !important;