fix: (CXSPA-9574) - Widescreen layout improvements (#20066)

Author: Pio-Bar

feature-libs/checkout/base/styles/components/order-confirmation/_order-confirmation-totals.scss

@@ -1,6 +1,11 @@
 %cx-order-confirmation-totals {
   .cx-order-summary {
     padding-inline-end: var(--cx-padding, 0);
+    @include forFeature('a11yWideScreenImprovements') {
+      cx-order-summary {
+        padding: 1rem;
+      }
+    }
 
     &.container {
       @include media-breakpoint-down(md) {

feature-libs/order/components/order-confirmation/order-confirmation-totals/order-confirmation-totals.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
 import { CartOutlets } from '@spartacus/cart/base/root';
+import { useFeatureStyles } from '@spartacus/core';
 import { Order, OrderFacade } from '@spartacus/order/root';
 import { Observable } from 'rxjs';
 
@@ -19,7 +20,9 @@ export class OrderConfirmationTotalsComponent implements OnDestroy {
   readonly cartOutlets = CartOutlets;
   order$: Observable<Order | undefined> = this.orderFacade.getOrderDetails();
 
-  constructor(protected orderFacade: OrderFacade) {}
+  constructor(protected orderFacade: OrderFacade) {
+    useFeatureStyles('a11yWideScreenImprovements');
+  }
 
   ngOnDestroy() {
     this.orderFacade.clearPlacedOrder();

feature-libs/product-configurator/rulebased/components/product-title/configurator-product-title.component.ts

@@ -5,7 +5,12 @@
  */
 
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import { Product, ProductScope, ProductService } from '@spartacus/core';
+import {
+  Product,
+  ProductScope,
+  ProductService,
+  useFeatureStyles,
+} from '@spartacus/core';
 import {
   ConfiguratorRouter,
   ConfiguratorRouterExtractorService,
@@ -14,8 +19,8 @@ import { ICON_TYPE } from '@spartacus/storefront';
 import { EMPTY, Observable } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
 import { ConfiguratorCommonsService } from '../../core/facade/configurator-commons.service';
-import { ConfiguratorExpertModeService } from '../../core/services/configurator-expert-mode.service';
 import { Configurator } from '../../core/model/configurator.model';
+import { ConfiguratorExpertModeService } from '../../core/services/configurator-expert-mode.service';
 
 @Component({
   selector: 'cx-configurator-product-title',
@@ -80,7 +85,9 @@ export class ConfiguratorProductTitleComponent {
     protected configRouterExtractorService: ConfiguratorRouterExtractorService,
     protected productService: ProductService,
     protected configExpertModeService: ConfiguratorExpertModeService
-  ) {}
+  ) {
+    useFeatureStyles('a11yWideScreenImprovements');
+  }
 
   triggerDetails(): void {
     this.showMore = !this.showMore;

feature-libs/product-configurator/rulebased/styles/_configurator-product-title.scss

@@ -1,4 +1,8 @@
 %cx-configurator-product-title {
+  @include forFeature('a11yWideScreenImprovements') {
+    background-color: var(--cx-color-background);
+    box-shadow: inset 0px 10px 7px -12px var(--cx-color-dark);
+  }
   &:not(:empty) {
     @include media-breakpoint-up(lg) {
       width: 1140px;
@@ -13,6 +17,10 @@
       flex-direction: row;
       justify-content: center;
       background-color: var(--cx-color-background);
+      @include forFeature('a11yWideScreenImprovements') {
+        background-color: unset;
+      }
+
       margin-block-end: 15px;
     }
 
@@ -23,7 +31,12 @@
       padding-inline-end: 0px;
       padding-block-start: 15px;
       padding-block-end: 15px;
-      box-shadow: inset 0px 10px 7px -12px var(--cx-color-dark);
+      @include forFeature('a11yWideScreenImprovements') {
+        box-shadow: unset;
+        justify-content: center;
+        max-width: 1140px;
+        margin: auto;
+      }
 
       .cx-title {
         font-weight: bold;

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -962,6 +962,12 @@ export interface FeatureTogglesInterface {
    */
   a11yWrapReviewOrderInSection?: boolean;
 
+  /**
+   * Improves wide viewport layout issues.
+   * Affects the styles of: Order confirmation page, product configurator.
+   */
+  a11yWideScreenImprovements?: boolean;
+
   /**
    * Adjusts line spacing in menus and navigation dropdowns for better readability
    * across different monitors, text sizes, and zoom levels.
@@ -1142,6 +1148,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   useExtendedMediaComponentConfiguration: false,
   showRealTimeStockInPDP: false,
   a11yScrollToTopPositioning: false,
+  a11yWideScreenImprovements: false,
   a11yOptimizedMenuSpacing: false,
   a11yNgSelectLayering: false,
   enableSecurePasswordValidation: false,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -440,6 +440,7 @@ if (environment.cpq) {
         useExtendedMediaComponentConfiguration: true,
         showRealTimeStockInPDP: false,
         a11yScrollToTopPositioning: true,
+        a11yWideScreenImprovements: true,
         a11yWrapReviewOrderInSection: true,
         a11yOptimizedMenuSpacing: true,
         a11yNgSelectLayering: true,

projects/storefrontstyles/scss/layout/page-templates/_order-confirmation-page.scss

@@ -7,6 +7,15 @@
     margin-inline-start: auto;
     margin-inline-end: auto;
 
+    @include forFeature('a11yWideScreenImprovements') {
+      @include media-breakpoint-up(xl) {
+        flex: none;
+        width: var(--cx-page-width-max);
+        margin-inline-start: 100%;
+        margin-inline-end: 100%;
+      }
+    }
+
     @include media-breakpoint-down(md) {
       width: 100%;
       max-width: none;