From 75e267da1d0b4f978ba3a027b5babc5c4ea019ea Mon Sep 17 00:00:00 2001
From: Hakeem <ahmadhakeem1894@outlook.com>
Date: Tue, 13 May 2025 05:02:06 -0700
Subject: [PATCH] docs(docs-infra): fix update page styles to adhere to the new
 layout (#61256)

PR Close #61256
---
 .../app/features/update/update.component.html |  2 +-
 .../app/features/update/update.component.scss | 31 +++++++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/adev/src/app/features/update/update.component.html b/adev/src/app/features/update/update.component.html
index 8635134a7a2..426a8a2003e 100644
--- a/adev/src/app/features/update/update.component.html
+++ b/adev/src/app/features/update/update.component.html
@@ -1,5 +1,5 @@
 <div class="page docs-viewer">
-  <h1 tabindex="-1">Update Guide</h1>
+  <h1 class="page-header" tabindex="-1">Update Guide</h1>
   <div class="wizard">
     <div>
       <h2>Select the options that match your update</h2>
diff --git a/adev/src/app/features/update/update.component.scss b/adev/src/app/features/update/update.component.scss
index 9dc6f87ca1f..2a9c2de8d33 100644
--- a/adev/src/app/features/update/update.component.scss
+++ b/adev/src/app/features/update/update.component.scss
@@ -1,21 +1,39 @@
 @use '@angular/docs/styles/media-queries' as mq;
 
-::ng-deep adev-update-guide{
+:host {
   display: flex;
   flex-flow: column;
   align-items: center;
-  padding: var(--layout-padding);
+  padding: var(--layout-padding) 0px;
   container: update-guide-page / inline-size;
+
+  .docs-viewer {
+    padding-inline: var(--layout-padding);
+
+    //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);
+      box-sizing: border-box;
+    }
+
+    .page-header {
+      margin-top: 0px;
+    }
+  }
 }
+
 .page {
   max-width: var(--page-width);
-  & > *{
-    @include mq.for-big-desktop-up{
+
+  &>* {
+    @include mq.for-big-desktop-up {
       padding-inline: 0px;
     }
   }
 
-  @include mq.for-tablet-landscape-down{
+  @include mq.for-tablet-landscape-down {
     width: 100%;
   }
 }
@@ -87,6 +105,7 @@ h4 {
     padding-block: 0.5rem;
     font-weight: 400;
     transition: border 0.3s ease;
+
     span {
       color: var(--primary-contrast);
       transition: color 0.3s ease;
@@ -105,7 +124,7 @@ h4 {
   display: flex;
   align-items: center;
 
-  > div {
+  >div {
     margin-inline-start: 2rem;
   }