Fix for Workarea styling issues (#632)

vishalshrm539 · Sharma · web-flow · commit d4403bd28725 · 2025-12-16T16:38:26.000+05:30
Co-authored-by: Sharma &lt;vishal.sharma@in.pega.com&gt;
diff --git a/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.html b/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.html
@@ -32,7 +32,7 @@
       </div>
     </mat-nav-list>
   </mat-sidenav>
-  <mat-sidenav-content>
+  <mat-sidenav-content [class.collapsed-mode]="collapsed">
     <!-- Top Toolbar -->
 
     <mat-toolbar style="position: sticky; top: 0; z-index: 10">
diff --git a/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.scss b/src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.scss
@@ -142,6 +142,14 @@ mat-nav-list {
   }
 }
 
+::ng-deep .mat-sidenav-content {
+  margin-left: 16rem !important;
+}
+
+::ng-deep .collapsed-mode.mat-sidenav-content {
+  margin-left: 5.313rem !important;
+}
+
 /* Optional: Add spacing below the toggle button if needed */
 .toggle-header {
   margin-bottom: 10px;
diff --git a/src/containerStyles.scss b/src/containerStyles.scss
@@ -9,9 +9,10 @@ app-flow-container {
   }
 
   .psdk-flow-container-top {
-    background-color: var(--mat-sys-surface-container);
+    background-color: #fff;
     padding: 0.5rem 0.625rem;
-    border-radius: 0.3125rem;
+    border-top-left-radius: 2rem;
+    border-bottom: gray 0.0625rem solid;
   }
   .psdk-flow-container {
     padding-left: 2.1875rem;

Original file line number	Diff line number	Diff line change
`@@ -142,6 +142,14 @@ mat-nav-list {`
`142`	`142`	`}`
`143`	`143`	`}`
`144`	`144`
	`145`	`+::ng-deep .mat-sidenav-content {`
	`146`	`+ margin-left: 16rem !important;`
	`147`	`+}`
	`148`	`+`
	`149`	`+::ng-deep .collapsed-mode.mat-sidenav-content {`
	`150`	`+ margin-left: 5.313rem !important;`
	`151`	`+}`
	`152`	`+`
`145`	`153`	`/* Optional: Add spacing below the toggle button if needed */`
`146`	`154`	`.toggle-header {`
`147`	`155`	`margin-bottom: 10px;`
Original file line number	Diff line number	Diff line change
`@@ -9,9 +9,10 @@ app-flow-container {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.psdk-flow-container-top {`
`12`		`- background-color: var(--mat-sys-surface-container);`
	`12`	`+ background-color: #fff;`
`13`	`13`	`padding: 0.5rem 0.625rem;`
`14`		`- border-radius: 0.3125rem;`
	`14`	`+ border-top-left-radius: 2rem;`
	`15`	`+ border-bottom: gray 0.0625rem solid;`
`15`	`16`	`}`
`16`	`17`	`.psdk-flow-container {`
`17`	`18`	`padding-left: 2.1875rem;`