fix: adjust grid layouts for better responsiveness (#670)

Author: tumms2021389

package-lock.json

@@ -61,7 +61,7 @@
     "@angular/platform-browser": "^19.2.14",
     "@angular/platform-browser-dynamic": "^19.2.14",
     "@angular/router": "^19.2.14",
-    "@pega/angular-sdk-components": "~0.25.7",
+    "@pega/angular-sdk-components": "~0.25.8",
     "@pega/auth": "~0.2.34",
     "@pega/cosmos-react-condition-builder": "^7.0.4",
     "@pega/cosmos-react-core": "^7.0.4",
@@ -86,7 +86,7 @@
     "@angular/compiler-cli": "^19.2.14",
     "@angular/language-service": "^19.2.14",
     "@chromatic-com/storybook": "^3.2.7",
-    "@pega/angular-sdk-overrides": "~0.25.7",
+    "@pega/angular-sdk-overrides": "~0.25.8",
     "@pega/configs": "^0.16.3",
     "@pega/constellationjs": "~25.1.0",
     "@pega/dx-component-builder-sdk": "~0.25.7",

package.json

@@ -1,9 +1,13 @@
 .psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   gap: 1.5rem;
   align-items: start;
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .psdk-main-content-section {
@@ -14,7 +18,7 @@
 
 .psdk-grid-filter-wide-narrow {
   display: grid;
-  grid-template-columns: 7fr 3fr;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
@@ -23,6 +27,10 @@
   & > *:nth-child(1) {
     min-width: 0;
   }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: 7fr 3fr;
+  }
 }
 
 .psdk-grid-filter-narrow-wide {

src/app/_samples/mediaco/components/banner/banner.component.scss

@@ -10,7 +10,6 @@ $text-dark: #2c2c2c;
 
 .content-wrapper {
   width: 100%;
-  max-width: 1000px;
   display: flex;
   flex-direction: column;
 }
@@ -48,7 +47,6 @@ $text-dark: #2c2c2c;
   grid-auto-rows: 1px;
   gap: $gap-size;
   width: 100%;
-  max-width: 1100px;
   align-items: start;
   grid-auto-flow: row dense;
 

src/app/_samples/mediaco/components/quick-create/quick-create.component.scss

@@ -185,6 +185,7 @@ mat-nav-list {
 
   .mat-toolbar-multiple-rows {
     padding-top: 5px;
+    min-height: 64px;
   }
 }