fix(platform): Adjust layout for wide screens in dev docs (#14777)

Adjusts css for devdocs on wide screens, also fixes the layout for
dev-docs sidebar

Author: chargome

src/components/docPage/index.tsx

@@ -126,7 +126,7 @@ export function DocPage({
           </aside>
         )}
       </section>
-      <style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); }`}</style>
+      <style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); box-sizing: border-box; }`}</style>
       <style>{`
         @media (min-width: 2057px) {
           :root {
@@ -137,8 +137,8 @@ export function DocPage({
           /* Cap content width and center (reinforced at this breakpoint) */
           #doc-content {
             max-width: var(--doc-content-w);
-            padding-left: 5rem; /* increase from px-6 (24px) to 5rem (80px) */
-            padding-right: 5rem;
+            padding-left: 2rem;
+            padding-right: 2rem;
           }
           /* Cancel default push so content can center */
           [data-layout-anchor="left"] + .main-content {

src/components/sidebar/developDocsSidebar.tsx

@@ -37,7 +37,7 @@ export function DevelopDocsSidebar({
     return toTree(apiNodes);
   };
   return (
-    <aside className={`${styles.sidebar} p-3`}>
+    <aside className={`${styles.sidebar} p-3`} data-layout-anchor="left">
       <input type="checkbox" id={sidebarToggleId} className="hidden" />
       <style>{':root { --sidebar-width: 300px; }'}</style>
       <div className="md:flex flex-col items-stretch">