UHF-9132: Add max-width limitation to all content types without sidebar except landing page

src/scss/06_components/layout/_component.scss

@@ -4,25 +4,20 @@
   @include component-margin-top;
 }
 
-// When components are full width and do not contain liftup-with-img-bg,
+// When components are full width and do not contain liftup-with-img-bg or content-cards,
 // they should have padding that keeps them from touching side.
-.components--lower > .component:not(.component--liftup-with-image-bg),
-.no-sidebar .components--upper > .component:not(.component--liftup-with-image-bg) {
+.components--lower > .component:not(.component--liftup-with-image-bg, .component--content-cards),
+.page-type--landing-page.no-sidebar .components--upper > .component:not(.component--liftup-with-image-bg, .component--content-cards) {
   @include component-side-padding;
 }
 
-// Koro should touch the sides
-.component--has-koro > .hds-koros {
-  margin-left: -$component-side-padding-mobile;
-  margin-right: -$component-side-padding-mobile;
-  width: calc(#{$component-side-padding-mobile} + 100% + #{$component-side-padding-mobile});
+.component--full-width {
+  padding-bottom: $spacing-triple;
+  padding-top: $spacing-triple;
 
-  @if $component-side-padding-mobile != $component-side-padding-desktop {
-    @include breakpoint($component-side-padding-breakpoint) {
-      margin-left: -$component-side-padding-desktop;
-      margin-right: -$component-side-padding-desktop;
-      width: calc(#{$component-side-padding-desktop} + 100% + #{$component-side-padding-desktop});
-    }
+  @include breakpoint($breakpoint-m) {
+    padding-bottom: $spacing-quadruple;
+    padding-top: $spacing-quadruple;
   }
 }
 
@@ -85,3 +80,60 @@
 .component__tags {
   margin-top: $spacing-and-half;
 }
+
+// Components on other pages than landing-page
+// need to be limited to content max-width to maintain readability.
+:not(.page-type--landing-page).wrapper .components:not(.components--lower) {
+  @include components-container-max-width;
+  margin-left: auto;
+  margin-right: auto;
+
+  @include breakpoint($breakpoint-m) {
+    @include component-side-padding;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .component {
+    max-width: $content-width-max;
+  }
+
+  .component--full-width {
+    padding-bottom: $component-side-padding-mobile;
+    padding-top: $component-side-padding-mobile;
+
+    @include breakpoint($component-side-padding-breakpoint) {
+      padding-bottom: $component-side-padding-desktop;
+      padding-top: $component-side-padding-desktop;
+    }
+  }
+
+  // All other components except the full-width ones need
+  // to have padding on smaller screens but have it removed on larger screens.
+  > .component:not(.component--full-width) {
+    @include component-side-padding;
+
+    @include breakpoint($breakpoint-m) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+// TODO: UHF-9389 Unit needs also these following fixed elements max-width.
+// This should/could be fixed by changing the elements dom to use component classes.
+.no-sidebar .unit--full .main-image picture {
+  max-width: $content-width-max
+}
+
+// TODO: UHF-9389 Service needs also these following fixed elements max-width.
+// This should/could be fixed by changing the elements dom to use component classes.
+.no-sidebar .service--full .service__errand-services {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $content-area-wrapper-width-max;
+
+  .errand-service {
+    max-width: $content-width-max;
+  }
+}

src/scss/06_components/layout/_layout.scss

@@ -1,4 +1,6 @@
-$-sidebar-width: 340px;
+// Calculate the sidebar width which consists of the designed content width of 340px
+// and padding of $spacing-double for each side on desktop and larger screen sizes.
+$-sidebar-width: calc($spacing-double + 340px + $spacing-double);
 
 .layout-main-wrapper * {
   scroll-margin-top: 113px; // Mobile header + language switcher.
@@ -30,7 +32,6 @@ $-sidebar-width: 340px;
 
   @include breakpoint($breakpoint-l) {
     .has-sidebar & {
-      column-gap: $spacing-quadruple;
       grid-template-areas: 'content sidebar';
       grid-template-columns: auto $-sidebar-width;
     }
@@ -43,15 +44,38 @@ $-sidebar-width: 340px;
       grid-template-rows: auto 1fr;
     }
   }
+}
 
-  @include breakpoint($breakpoint-xl) {
-    column-gap: $spacing-triple;
+.has-sidebar .main-content {
+  @include breakpoint($breakpoint-m) {
+    @include components-container-max-width;
   }
 }
 
-.has-sidebar .main-content {
+// Set proper width for all generic page components.
+// TODO: UHF-9391 Create a helper-class that can be used here instead of this long list of selectors.
+.page-title,
+.lead-in,
+.page-divider,
+.content-date,
+.main-image,
+.long-desc,
+.enriched-content:not(.components),
+.content-links,
+.content-tags:not(.content-tags--card),
+.social-media__items {
   @include components-container-max-width;
   @include component-side-padding;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// TODO: UHF-9355 For pages that for some reason include the page title inside enriched content container we
+// need to remover the double padding. This should be fixed by removing the page-title away from enriched
+// content container and then remove these lines. For example news archive has this kind of setup.
+.enriched-content > .page-title {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .layout-sidebar-first {
@@ -61,6 +85,8 @@ $-sidebar-width: 340px;
 
   @include breakpoint($breakpoint-l) {
     display: block;
+    padding-left: $spacing-double;
+    padding-right: $spacing-double;
 
     .no-sidebar-second & {
       margin-bottom: 0;
@@ -81,5 +107,6 @@ $-sidebar-width: 340px;
 }
 
 .layout-sidebar-second {
+  @include component-side-padding;
   grid-area: sidebar;
 }

src/scss/06_components/navigation/_table-of-contents.scss

@@ -10,10 +10,6 @@
     margin-left: auto;
     margin-right: auto;
   }
-
-  .has-sidebar & {
-    @include component-negative-side-margin;
-  }
 }
 
 // Add extra margin to the following element if table of contents is enabled.
@@ -99,14 +95,14 @@
     display: inline-flex;
     margin-bottom: $spacing-and-half;
     margin-inline-end: $spacing;
-  
+
     @include breakpoint($breakpoint-m) {
       margin-inline-end: $spacing-and-half;
     }
 
     .hel-icon {
       --icon-size: #{$spacing-quadruple};
-  
+
       @include breakpoint($breakpoint-m) {
         --icon-size: #{remify(100px)};
       }
@@ -121,11 +117,11 @@
   .nojs__desc {
     @include font('body');
     margin-top: $spacing;
-  
+
     @include breakpoint($breakpoint-l) {
       margin-top: $spacing-and-half;
     }
-  
+
     p:first-child {
       margin: 0;
     }

src/scss/06_components/pages/_basic-page.scss

@@ -81,24 +81,6 @@
   }
 }
 
-// stylelint-disable no-descending-specificity
-// Set proper width for all generic page components
-.no-sidebar {
-  .page-title,
-  .lead-in,
-  .page-divider,
-  .main-image,
-  .long-desc,
-  .enriched-content:not(.components),
-  .content-tags {
-    @include components-container-max-width;
-    @include component-side-padding;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-// stylelint-enable no-descending-specificity
-
 .content-date {
   @include font('small');
   color: $color-black-60;

src/scss/06_components/pages/_cookie-compliance.scss

@@ -11,7 +11,6 @@
 
 .cookie-compliance-block {
   @include components-container-max-width;
-  @include component-side-padding;
 
   .cookie-selection-instruction {
     @include font('body');

src/scss/06_components/pages/_news-page.scss

@@ -11,6 +11,8 @@
 .news-listing__item {
   list-style: none;
   margin-top: $spacing-and-half;
+  padding-left: 0; // Remove card paddings from news listing
+  padding-right: 0; // Remove card paddings from news listing
   position: relative;
 }
 

src/scss/06_components/paragraphs/_columns.scss

@@ -1,17 +1,9 @@
-.columns {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
+$column-gap: $spacing-and-half;
 
+.columns {
   @include breakpoint($breakpoint-m) {
-    flex-direction: row;
-    margin-left: -$spacing-and-half;
-    margin-right: -$spacing-and-half;
-  }
-
-  @include breakpoint($breakpoint-l) {
-    margin-left: -$spacing-double;
-    margin-right: -$spacing-double;
+    grid-gap: calc($column-gap * 2);
+    display: grid;
   }
 
   // Overrides for image paragraph styles.
@@ -30,36 +22,26 @@
   }
 }
 
-.columns__column {
-  align-self: stretch;
-
+.columns--30-70 {
   @include breakpoint($breakpoint-m) {
-    margin-left: $spacing-and-half;
-    margin-right: $spacing-and-half;
-  }
-
-  @include breakpoint($breakpoint-l) {
-    margin-left: $spacing-double;
-    margin-right: $spacing-double;
+    grid-template-columns: calc(30% - $column-gap) calc(70% - $column-gap);
   }
+}
 
-  &.column--50 {
-    @include breakpoint($breakpoint-m) {
-      width: 50%;
-    }
+.columns--70-30 {
+  @include breakpoint($breakpoint-m) {
+    grid-template-columns: calc(70% - $column-gap) calc(30% - $column-gap);
   }
+}
 
-  &.column--30 {
-    @include breakpoint($breakpoint-m) {
-      width: 30%;
-    }
+.columns--50-50 {
+  @include breakpoint($breakpoint-m) {
+    grid-template-columns: calc(50% - $column-gap) calc(50% - $column-gap);
   }
+}
 
-  &.column--70 {
-    @include breakpoint($breakpoint-m) {
-      width: 70%;
-    }
-  }
+.columns__column {
+  width: 100%;
 
   + .columns__column {
     margin-top: $spacing-double;
@@ -69,53 +51,3 @@
     }
   }
 }
-
-// Sidebar layout.
-.has-sidebar .main-content {
-  // Columns in content area and inside accordion.
-  .columns {
-    @include breakpoint($breakpoint-l) {
-      flex-direction: column;
-    }
-
-    @include breakpoint($breakpoint-xl) {
-      flex-direction: row;
-    }
-  }
-
-  .columns__column {
-    @include breakpoint($breakpoint-l) {
-      width: auto;
-
-      &:not(:first-of-type) {
-        margin-top: $spacing-double;
-      }
-    }
-
-    @include breakpoint($breakpoint-xl) {
-      margin-top: 0;
-
-      &:not(:first-of-type) {
-        margin-top: 0;
-      }
-    }
-  }
-
-  .columns__column.column--50 {
-    @include breakpoint($breakpoint-xl) {
-      width: 50%;
-    }
-  }
-
-  .columns__column.column--30 {
-    @include breakpoint($breakpoint-xl) {
-      width: 30%;
-    }
-  }
-
-  .columns__column.column--70 {
-    @include breakpoint($breakpoint-xl) {
-      width: 70%;
-    }
-  }
-}