From 395d3bc4cb05a88ab3fca026acdc5e660aedbf15 Mon Sep 17 00:00:00 2001
From: Hakeem <ahmadhakeem1894@outlook.com>
Date: Tue, 13 May 2025 04:42:54 -0700
Subject: [PATCH] docs(docs-infra): fixating the position of the docs content
 whether TOC exists or not (#61256)

PR Close #61256
---
 .../docs-viewer/docs-viewer.component.scss       | 14 ++++++--------
 .../api-reference-details-page.component.scss    | 13 +++++--------
 .../cli-reference-details-page.component.scss    | 13 +++++--------
 .../features/tutorial/tutorial.component.scss    | 16 +++++++++++++---
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
index c6468f96724..86ee4cd153b 100644
--- a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
+++ b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.scss
@@ -21,17 +21,15 @@
     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)) {
 
-    //applying styles when TOC position got translated to the top right 
-    @media only screen and (min-width: 1431px) {
-      // take the available space except a reserved area for TOC
-      margin-left: -16rem;
-      width: calc(100% - 16rem);
-    }
+  //applying styles when TOC position got translated to the top right 
+  @media only screen and (min-width: 1431px) {
+    // take the available space except a reserved area for TOC
+    margin-left: -16rem;
+    width: calc(100% - 16rem);
   }
 
+
   pre {
     margin-block: 0;
   }
diff --git a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
index 509b3da45fe..0ef946eca39 100644
--- a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
+++ b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
@@ -9,17 +9,14 @@
   padding-top: var(--layout-padding);
   padding-bottom: var(--layout-padding);
 
-  &:has(> docs-viewer.docs-with-TOC) {
-    &:has(docs-table-of-contents ul > li:nth-child(2)) {
 
-      //applying styles when TOC position got translated to the top right 
-      @media only screen and (min-width: 1431px) {
-        // take the available space except a reserved area for TOC
-        width: calc(100% - 16rem);
-      }
-    }
+  //applying styles when TOC position got translated to the top right 
+  @media only screen and (min-width: 1431px) {
+    // take the available space except a reserved area for TOC
+    width: calc(100% - 16rem);
   }
 
+
   docs-viewer {
     display: block;
     padding-inline: var(--layout-padding);
diff --git a/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss b/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
index 047d2f5d19e..c5b91368584 100644
--- a/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
+++ b/adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.scss
@@ -10,17 +10,14 @@
   padding-bottom: var(--layout-padding);
 
 
-  &:has(> docs-viewer.docs-with-TOC) {
-    &:has(docs-table-of-contents ul > li:nth-child(2)) {
 
-      //applying styles when TOC position got translated to the top right 
-      @media only screen and (min-width: 1431px) {
-        // take the available space except a reserved area for TOC
-        width: calc(100% - 16rem);
-      }
-    }
+  //applying styles when TOC position got translated to the top right 
+  @media only screen and (min-width: 1431px) {
+    // take the available space except a reserved area for TOC
+    width: calc(100% - 16rem);
   }
 
+
   docs-viewer {
     display: block;
     padding-inline: var(--layout-padding);
diff --git a/adev/src/app/features/tutorial/tutorial.component.scss b/adev/src/app/features/tutorial/tutorial.component.scss
index c4e6d8aa64f..8dd3482984c 100644
--- a/adev/src/app/features/tutorial/tutorial.component.scss
+++ b/adev/src/app/features/tutorial/tutorial.component.scss
@@ -18,7 +18,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
 
   // Tablet / Mobile Tutorial Nav
   @include mq.for-tablet-landscape-up {
-    > .adev-tutorial-nav-container {
+    >.adev-tutorial-nav-container {
       display: none;
     }
   }
@@ -75,7 +75,7 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
 
   // Desktop Tutorial Nav
   @include mq.for-tablet-landscape-down {
-    > .adev-tutorial-nav-container {
+    >.adev-tutorial-nav-container {
       display: none;
     }
   }
@@ -90,6 +90,16 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
       backdrop-filter: blur(3px);
     }
   }
+
+  .docs-viewer {
+
+    //applying styles when TOC position got translated to the top right 
+    @media only screen and (min-width: 1431px) {
+      // take the available space except a reserved area for TOC
+      margin-left: 0rem;
+      width: unset;
+    }
+  }
 }
 
 .docs-viewer {
@@ -146,4 +156,4 @@ $column-width: calc(50% - #{$resizer-width} - var(--layout-padding));
     // override js applied width from split view resizer
     width: 100% !important;
   }
-}
+}
\ No newline at end of file