docs(docs-infra): fix the global layout of the site (#58831)

take the full width of the page for all the pages that use docs-viewer, also reserve an area for table of contents on-demand

Resolves: #52648

PR Close #58831

adev/shared-docs/components/table-of-contents/table-of-contents.component.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   position: fixed;
-  right: 16px;
+  right: 1rem;
   top: 0;
   height: fit-content;
   width: 14rem;

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss

@@ -9,19 +9,17 @@
   display: flex;
   flex-direction: column;
   padding: var(--layout-padding);
-  max-width: var(--page-width);
-  width: 100%;
   box-sizing: border-box;
 
   @media only screen and (max-width: 1430px) {
     container: docs-content / inline-size;
   }
 
-  // If rendered on the docs page, accommodate width for TOC
-  docs-docs & {
-    @media only screen and (min-width: 1430px) and (max-width: 1550px) {
-      width: calc(100% - 195px - var(--layout-padding));
-      max-width: var(--page-width);
+  // check if TOC component present in the page and has more than one elenment
+  &.docs-with-TOC:has(docs-table-of-contents ul > li:nth-child(2)) {
+    @media only screen and (min-width: 1430px) {
+      // take the available space except a reserved area for TOC
+      max-width: calc(100% - 17rem);
     }
   }
 

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts

@@ -60,6 +60,7 @@ export const GITHUB_CONTENT_URL = 'https://github.com/angular/angular/blob/main/
   encapsulation: ViewEncapsulation.None,
   host: {
     '[class.docs-animate-content]': 'animateContent',
+    '[class.docs-with-TOC]': 'hasToc',
   },
 })
 export class DocViewer implements OnChanges {

adev/shared-docs/styles/docs/_decorative-header.scss

@@ -6,7 +6,6 @@
   .docs-decorative-header {
     border-radius: 0.625rem;
     background: var(--septenary-contrast);
-    max-width: var(--page-width);
     overflow: hidden;
     display: flex;
     position: relative;

adev/src/app/features/references/api-reference-list/api-reference-list.component.scss

@@ -1,6 +1,5 @@
 :host {
   padding: var(--layout-padding);
-  max-width: var(--page-width);
   display: block;
 
   container: api-ref-page / inline-size;

adev/src/app/features/tutorial/tutorial.component.scss

@@ -67,7 +67,6 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
 }
 
 .docs-tutorial-content {
-  max-width: var(--page-width);
   min-width: 300px;
   width: 100%;
   box-sizing: content-box;

adev/src/app/features/update/update.component.scss

@@ -1,6 +1,5 @@
 .page {
   padding: var(--layout-padding);
-  max-width: var(--page-width);
   container: update-guide-page / inline-size;
 }