style: add max with content to avoid bad display on huge screen

src/app/app.component.html

@@ -38,7 +38,9 @@
     >
     </dlcm-main-toolbar-mobile>
   </div>
-  <div class="body">
+  <div class="body"
+       [class.ignore-grid]="ignoreGrid"
+  >
     <div class="instance-logo-wrapper"
          (click)="navigateToHome()"
     >
@@ -48,12 +50,18 @@
       >
     </div>
 
-    <dlcm-shared-breadcrumb (navigateChange)="navigate($event)"></dlcm-shared-breadcrumb>
+    <div class="breadcrumb-wrapper">
+      <dlcm-shared-breadcrumb class="breadcrumb"
+                              (navigateChange)="navigate($event)"
+      ></dlcm-shared-breadcrumb>
+    </div>
 
     <main class="content mat-typography"
           [dlcmSpinner]="!(isApplicationInitializedObs | async)"
     >
-      <router-outlet></router-outlet>
+      <div class="router-outlet-wrapper">
+        <router-outlet></router-outlet>
+      </div>
     </main>
 
     <dlcm-footer [updateVersion]="appStatusService.updateAvailable | async"

src/app/app.component.scss

@@ -44,6 +44,31 @@ dlcm-main-toolbar-desktop-vertical {
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  &.ignore-grid {
+    .breadcrumb-wrapper {
+      .breadcrumb {
+        max-width: initial;
+      }
+    }
+
+    .content {
+      .router-outlet-wrapper {
+        max-width: initial;
+      }
+    }
+  }
+}
+
+.breadcrumb-wrapper {
+  background-color: $background-grey;
+  display: flex;
+  justify-content: center;
+
+  .breadcrumb {
+    max-width: $grid-width;
+    width: 100%;
+  }
 }
 
 .content {
@@ -51,6 +76,12 @@ dlcm-main-toolbar-desktop-vertical {
   display: flex;
   overflow-y: auto;
   justify-content: center;
+
+  .router-outlet-wrapper {
+    display: flex;
+    flex: 1;
+    max-width: $grid-width;
+  }
 }
 
 // Display toolbar on left for dlcm theme on desktop only

src/app/app.component.ts

@@ -59,6 +59,7 @@ export class AppComponent extends SharedAbstractPresentational {
   @Select((state: LocalStateModel) => state.application.theme) themeObs: Observable<ThemeEnum>;
   @Select((state: LocalStateModel) => state.application.userRoles) userRolesObs: Observable<ApplicationRoleEnum[]>;
   @Select((state: LocalStateModel) => state.application.application_user.current) currentUserObs: Observable<UserExtended>;
+  ignoreGrid: boolean = false;
 
   @HostListener("window:beforeunload", ["$event"])
   leaveWithoutSaveNotification($event: Event): void {
@@ -137,10 +138,15 @@ export class AppComponent extends SharedAbstractPresentational {
     this.subscribe(this.urlStateObs
       .pipe(
         tap(urlState => {
+          this.ignoreGrid = false;
           if (urlState) {
             const url = urlState.url;
             if (url.startsWith(urlSeparator + RoutesEnum.homePage)) {
               this.currentModule = RoutesEnum.homePage;
+
+              if (url.startsWith(urlSeparator + RoutesEnum.homePageBrowsing)) {
+                this.ignoreGrid = true;
+              }
               return;
             }
 

src/app/features/home/components/presentationals/home-archive-form/home-archive-detail.presentational.scss

@@ -2,54 +2,59 @@
 
 $padding-bottom-desktop: 20px;
 
-.line {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-
-  @include respond-to-breakpoint('xs') {
-    flex-direction: column;
+:host {
+  display: block;
+  padding-bottom: 25px;
+
+  .line {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+
+    @include respond-to-breakpoint('xs') {
+      flex-direction: column;
+    }
   }
-}
 
-dt {
-  font-weight: bold;
-  width: 160px;
-  clear: left;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  @include respond-to-breakpoint-and-bigger('sm') {
-    padding-bottom: $padding-bottom-desktop;
+  dt {
+    font-weight: bold;
+    width: 160px;
+    clear: left;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include respond-to-breakpoint-and-bigger('sm') {
+      padding-bottom: $padding-bottom-desktop;
+    }
   }
-}
 
 
-dd {
-  margin-left: 0;
-  padding-bottom: 10px;
-  word-break: break-word;
+  dd {
+    margin-left: 0;
+    padding-bottom: 10px;
+    word-break: break-word;
 
-  @include respond-to-smaller-than-breakpoint('sm') {
-    width: 100%;
+    @include respond-to-smaller-than-breakpoint('sm') {
+      width: 100%;
+    }
   }
-}
 
-.pre {
-  font-size: 13px;
-  line-height: 1.42857143;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  overflow-x: auto;
-}
+  .pre {
+    font-size: 13px;
+    line-height: 1.42857143;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
 
-.code {
-  font-family: monospace;
-  white-space: pre-line;
-  padding-top: 0;
+  .code {
+    font-family: monospace;
+    white-space: pre-line;
+    padding-top: 0;
+  }
 }

src/app/shared/components/presentationals/shared-breadcrumb/shared-breadcrumb.presentational.scss

 @import "../../../../../sass/abstracts/variables";
 
-.breadcrumb {
-  padding: 10px 25px;
-  margin: 0;
-  list-style: none !important;
-  list-style-type: none;
-  background-color: $background-grey;
-}
-
-li {
-  display: inline;
-  font-size: 14px;
-}
+:host {
+  display: block;
 
-li + li:before {
-  padding: 8px;
-  line-height: 30px;
-  color: $dark-grey;
-  content: "/";
-}
+  .breadcrumb {
+    padding: 10px 25px;
+    line-height: 30px;
 
-a {
-  &.current {
-    text-decoration: none;
-    cursor: initial;
+    li {
+      display: inline;
+      font-size: 14px;
+    }
 
-    &:hover {
-      color: $primary-color;
+    li + li:before {
+      padding: 0 8px;
+      color: $dark-grey;
+      content: "/";
     }
 
-    &:hover:before {
-      visibility: hidden;
+    a {
+      &.current {
+        text-decoration: none;
+        cursor: initial;
+
+        &:hover {
+          color: $primary-color;
+        }
+
+        &:hover:before {
+          visibility: hidden;
+        }
+      }
     }
   }
 }

src/sass/abstracts/_variables.scss

@@ -4,6 +4,8 @@ $primary-color-darker: var(--primary-color-darker);
 $accent-color: var(--accent-color);
 $text-color: #292F33;
 
+$grid-width: 1400px;
+
 $red: #f44336;
 $green: #01b500;
 $background-grey: #f5f5f5;

src/sass/main.scss

@@ -110,7 +110,7 @@ ul {
   }
 }
 
-ul, li {
+ul, ol, li {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;