From 0c046a561b608fce95141efad8518b3ec7627378 Mon Sep 17 00:00:00 2001
From: Lu Wilson <l2wilson94@gmail.com>
Date: Fri, 23 Jun 2023 10:59:57 +0100
Subject: [PATCH] [docs] Allow sidebar to be scrolled on short screens (#1632)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR changes how the sidebar works on the docs site.

## What's the problem?
Previously, you couldn't reach the bottom of the sidebar on some screens
- unless you scroll to the very bottom of the main content. Some of our
pages are [very
long](https://canary.tldraw.dev/gen/editor/Editor-class), so this isn't
practical.

![2023-06-22 at 11 25 26 - Violet
Gazelle](https://github.com/tldraw/tldraw/assets/15892272/873ffa98-5eea-48b4-a005-c3aa89074065)

## How are we fixing it?
This PR makes the sidebar scroll separately from the main content.
It's less fancy and less pretty :/
But it's usable.

Maybe we could make it sleeker somehow, but this works at least.

![2023-06-22 at 11 27 29 - Rose
Hedgehog](https://github.com/tldraw/tldraw/assets/15892272/99bd47b9-d07c-46ff-b1bb-de0ac289d294)

## Admin

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. On the docs site, make your browser window short so that you can't
see the whole sidebar.
2. Make sure that you can scroll down to the bottom on the sidebar,
separately from the rest of the page.

### Release Notes

- Documentation: Fixed the sidebar being unscrollable on some short
screens.
---
 apps/docs/styles/globals.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 0f1fdace5..717d273ff 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -103,7 +103,6 @@ body {
 	column-gap: 28px;
 	row-gap: 0px;
 	margin: 0px auto;
-	padding-top: 40px;
 }
 
 .icon-button {
@@ -168,7 +167,7 @@ body {
 }
 
 .article {
-	padding: 16px 16px 120px 16px;
+	padding: 56px 16px 120px 16px;
 	font-weight: 400;
 	max-width: 100%;
 	overflow-x: hidden;
@@ -459,8 +458,10 @@ body {
 	padding: 8px;
 	align-self: start;
 	top: 0px;
+	max-height: calc(100vh);
 	z-index: 1000;
 	overflow-y: auto;
+	padding-top: 40px;
 }
 
 .sidebar .sidebar__list h4 {