Merge pull request #16117 from craftcms/bugfix/cms-16112-card-updates

Update grid rules for field layouts

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Fixed a bug where Live Preview wasn’t reloading after reordering nested entries or addresses. ([#16122](https://github.com/craftcms/cms/issues/16122))
 - Fixed a JavaScript error that could occur when reordering structured elements within an embedded element index. ([#16103](https://github.com/craftcms/cms/issues/16103))
 - Fixed a bug where changes to nested entries/addresses in card view were getting published immediately on save, if the parent element was a draft.
+- Fixed a bug where element cards could bleed out of their containers. ([#16112](https://github.com/craftcms/cms/issues/16112))
 
 ## 5.5.0.1 - 2024-11-13
 

src/web/assets/cp/src/css/_cp.scss

@@ -1126,6 +1126,7 @@ li.breadcrumb-toggle-wrapper {
   padding-block: var(--xl);
   padding-inline: var(--padding);
   word-wrap: break-word;
+  container-type: inline-size;
 
   & > hr {
     margin-inline: calc(var(--xl) * -1);
@@ -1893,8 +1894,8 @@ li.breadcrumb-toggle-wrapper {
         }
       }
 
-      // 2 cols for 600 - 1535px
-      @media only screen and (min-width: $minDesktopWidth) and (max-width: $minXlUiWidth - calc(1rem/16)) {
+      // 2 cols when container is > 720px
+      @container (min-width: 45em) {
         &.width-25,
         &.width-50 {
           width: 50%;

src/web/assets/cp/src/css/_main.scss

@@ -3759,7 +3759,7 @@ table {
 .card-grid {
   display: grid !important;
   gap: var(--s) !important;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
   & > li {
     border-radius: var(--large-border-radius);