Continue to display sidebar when page scrolls

jvns · jvns · commit 9f2a5aeb99ca · 2025-08-09T13:23:15.000-04:00
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
@@ -27,13 +27,17 @@ body {
 }
 
 aside {
-  float: left;
   width: 218px;
   margin-bottom: 35px;
+  position: sticky;
+  top: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+  /* align with the top of the content */
+  padding-top: 46px;
 }
 
 #content {
-  float: right;
   width: 702px;
 }
 
@@ -437,6 +441,10 @@ table.benchmarks {
   }
 }
 
+#content-wrapper {
+  display: flex;
+}
+
 // Breakpoint ----------------
 @media (max-width: $default) {
   .responsive-table { overflow-x: auto; }

Original file line number	Diff line number	Diff line change
`@@ -27,13 +27,17 @@ body {`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`aside {`
`30`		`- float: left;`
`31`	`30`	`width: 218px;`
`32`	`31`	`margin-bottom: 35px;`
	`32`	`+ position: sticky;`
	`33`	`+ top: 0;`
	`34`	`+ max-height: 100vh;`
	`35`	`+ overflow-y: auto;`
	`36`	`+ /* align with the top of the content */`
	`37`	`+ padding-top: 46px;`
`33`	`38`	`}`
`34`	`39`
`35`	`40`	`#content {`
`36`		`- float: right;`
`37`	`41`	`width: 702px;`
`38`	`42`	`}`
`39`	`43`
`@@ -437,6 +441,10 @@ table.benchmarks {`
`437`	`441`	`}`
`438`	`442`	`}`
`439`	`443`
	`444`	`+#content-wrapper {`
	`445`	`+ display: flex;`
	`446`	`+}`
	`447`	`+`
`440`	`448`	`// Breakpoint ----------------`
`441`	`449`	`@media (max-width: $default) {`
`442`	`450`	`.responsive-table { overflow-x: auto; }`