fix #109 and #137, hopefully (#220)

* fix #109 and #137, hopefully

* fix

* fix

* fixes

* fix

* tidy up

Author: Rich-Harris

apps/svelte.dev/src/routes/_home/common.css

@@ -5,6 +5,7 @@
 .home {
 	--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
 	--background-2: var(--sk-theme-2);
+	overflow-x: hidden;
 }
 
 .home .grid {

apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

@@ -148,10 +148,12 @@
 
 		@media (min-width: 1200px) {
 			position: fixed;
+			display: flex;
+			flex-direction: column;
 			top: 14rem;
+			height: calc(100vh - 14rem);
 			left: calc(100dvw - var(--sidebar-width));
 			width: var(--sidebar-width);
-			padding: 0 var(--sk-page-padding-side) 0 0;
 			box-sizing: border-box;
 
 			input {
@@ -170,6 +172,10 @@
 
 			nav {
 				display: block;
+				overflow-y: auto;
+				scrollbar-width: none;
+				margin-left: -1rem; /* negative margin avoids focus rings being cut off */
+				padding: 0 0 var(--sk-page-padding-top) 1rem;
 
 				li:first-child {
 					display: list-item;

packages/site-kit/src/lib/components/Shell.svelte

@@ -75,7 +75,6 @@ The main shell of the application. It provides a slot for the top navigation, th
 		padding-top: var(--sk-nav-height);
 		padding-bottom: var(--sk-banner-bottom-height);
 		height: 100%;
-		overflow-x: hidden;
 	}
 
 	@media (max-width: 799px) {

packages/site-kit/src/lib/components/Text.svelte

@@ -53,6 +53,19 @@
 
 <style>
 	.text :global {
+		h2,
+		h3 {
+			max-width: 100%;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			padding: 0 1em 0 0;
+
+			@media (min-width: 768px) {
+				margin: 0 0 0 -2em;
+				padding: 0 1em 0 2em;
+			}
+		}
+
 		h2 {
 			margin-top: 7rem;
 		}
@@ -289,23 +302,24 @@
 		a.permalink {
 			position: absolute !important;
 			display: block;
-			background: url(../icons/link.svg) 0 50% no-repeat;
+			background: url(../icons/link.svg) 50% 50% no-repeat;
 			background-size: 1em 1em;
-			width: 1.4em;
-			height: 1.2em;
-			top: 0;
+			width: 1.2em;
+			height: 0.8em;
+			top: 0.2em;
 
 			@media (max-width: 767px) {
 				right: 0;
 				scale: 0.8;
 			}
 
 			@media (min-width: 768px) {
-				left: -1.3em;
+				left: 0.7em;
 				opacity: 0;
 				transition: opacity 0.2s;
 
-				:where(h2, h3):hover & {
+				:where(h2, h3):hover &,
+				&:focus {
 					opacity: 1;
 				}
 			}