From 9e33d1d50a695052bb7ddcbaca176faa9fb40880 Mon Sep 17 00:00:00 2001
From: Connor Bray <connorb108@gmail.com>
Date: Sun, 4 May 2025 01:32:57 +0000
Subject: [PATCH] fix: mobile styles on documentation page and missing react
 key

fixes: #3270
---
 packages/typescriptlang-org/gatsby-ssr.js           |  2 +-
 .../src/templates/documentation.scss                | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/typescriptlang-org/gatsby-ssr.js b/packages/typescriptlang-org/gatsby-ssr.js
index a82670bfd51f..065df32d5047 100644
--- a/packages/typescriptlang-org/gatsby-ssr.js
+++ b/packages/typescriptlang-org/gatsby-ssr.js
@@ -38,5 +38,5 @@ const CustomColorSwitcherCode = () => {
 }
 
 exports.onRenderBody = ({ setPreBodyComponents }) => {
-  setPreBodyComponents(<CustomColorSwitcherCode />)
+  setPreBodyComponents(<CustomColorSwitcherCode key="CustomColorSwitcherCode" />)
 }
diff --git a/packages/typescriptlang-org/src/templates/documentation.scss b/packages/typescriptlang-org/src/templates/documentation.scss
index 6f3ccb1cdd9e..f7e32428d820 100644
--- a/packages/typescriptlang-org/src/templates/documentation.scss
+++ b/packages/typescriptlang-org/src/templates/documentation.scss
@@ -48,6 +48,19 @@
     flex-direction: row;
     width: 100%;
 
+    aside.handbook-toc {
+      @media (max-width: $screen-xs) {
+        padding: 0 0.5rem;
+        box-sizing: border-box;
+      }
+    }
+
+    .whitespace.raised {
+      width: fill-available;
+      width: -moz-available;
+      width: -webkit-fill-available;
+    }
+
     @media (max-width: 999px) {
       flex-direction: column;
     }