docs: fix Header UI inconsistency (#16464)

Tanujkanti4441 · web-flow · commit 436f71284336 · 2022-11-17T11:17:26.000+01:00
* fix: Header UI inconsistency

* fix: unexpected empty line

* fix: additional class

* fix: design break on mobile size

* fix: UI of other pages on docs
diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
@@ -138,7 +138,7 @@
     <script src="https://unpkg.com/anchor-js@4.3.1/anchor.min.js"></script>
 </head>
 
-<body class="{{ hook }} docs">
+<body class="{{ hook }}">
     <a href="#main" class="c-btn c-btn--primary" id="skip-link">Skip to main content</a>
 
     {{ content | safe }}
diff --git a/docs/src/assets/scss/components/hero.scss b/docs/src/assets/scss/components/hero.scss
@@ -36,6 +36,11 @@
         padding: 0 calc(1rem + 1vw);
         padding-bottom: 0;
         align-items: center;
+        max-width: 1700px;
+
+        @media all and (min-width: 1700px) {
+            margin: auto;
+        }
     }
 }
 
diff --git a/docs/src/assets/scss/docs-header.scss b/docs/src/assets/scss/docs-header.scss
@@ -12,10 +12,14 @@
         padding-bottom: 0;
         padding-block-start: 0;
         padding-block-end: 0;
+        max-width: 1700px;
 
         @media all and (min-width: 1024px) {
             justify-content: space-between;
         }
+        @media all and (min-width: 1700px) {
+            margin: auto;
+        }
     }
 }
 
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
@@ -4,11 +4,6 @@ html {
     scroll-behavior: smooth;
 }
 
-.docs {
-    max-width: 1700px;
-    margin: 0 auto;
-}
-
 .docs-aside__content {
     flex: 1;
 }
@@ -18,12 +13,16 @@ html {
     flex: 1;
     display: flex;
     flex-direction: column;
+    max-width: 1700px;
 
     @media all and (min-width: 1024px) {
         display: grid;
         grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr);
         align-items: stretch;
     }
+    @media all and (min-width: 1700px) {
+        margin: auto;
+    }
 }
 
 .docs-nav {
diff --git a/docs/src/assets/scss/foundations.scss b/docs/src/assets/scss/foundations.scss
@@ -121,6 +121,11 @@ hr {
     width: 100%;
     margin: 0 auto;
     padding: var(--space-xl-3xl) calc(1rem + 1vw);
+    max-width: 1700px;
+
+    @media all and (min-width: 1700px) {
+        margin: auto;
+    }
 }
 
 .section-head {

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,11 @@`
`36`	`36`	`padding: 0 calc(1rem + 1vw);`
`37`	`37`	`padding-bottom: 0;`
`38`	`38`	`align-items: center;`
	`39`	`+ max-width: 1700px;`
	`40`	`+`
	`41`	`+ @media all and (min-width: 1700px) {`
	`42`	`+ margin: auto;`
	`43`	`+ }`
`39`	`44`	`}`
`40`	`45`	`}`
`41`	`46`
Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,14 @@`
`12`	`12`	`padding-bottom: 0;`
`13`	`13`	`padding-block-start: 0;`
`14`	`14`	`padding-block-end: 0;`
	`15`	`+ max-width: 1700px;`
`15`	`16`
`16`	`17`	`@media all and (min-width: 1024px) {`
`17`	`18`	`justify-content: space-between;`
`18`	`19`	`}`
	`20`	`+ @media all and (min-width: 1700px) {`
	`21`	`+ margin: auto;`
	`22`	`+ }`
`19`	`23`	`}`
`20`	`24`	`}`
`21`	`25`