From c8e95ee4608fc4626177099df5d5a0afcab22b80 Mon Sep 17 00:00:00 2001
From: Robert Sese <rsese@github.com>
Date: Tue, 22 Feb 2022 15:17:00 -0600
Subject: [PATCH] Set explicit height so things can stick (#25471)

* Set explicit height so things can stick

* Add comment about explicit height

* Fix printing with explicit height set
---
 components/DefaultLayout.tsx | 7 ++++++-
 stylesheets/utilities.scss   | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
index b1a560655a93..d9752e91c6e7 100644
--- a/components/DefaultLayout.tsx
+++ b/components/DefaultLayout.tsx
@@ -85,7 +85,12 @@ export const DefaultLayout = (props: Props) => {
         Skip to main content
       </a>
       <SidebarNav />
-      <div className="flex-column flex-1 overflow-auto">
+      {/* Need to set an explicit height for sticky elements since we also
+          set overflow to auto */}
+      <div
+        className="flex-column flex-1 overflow-auto print-overflow-visible"
+        style={{ height: '100vh' }}
+      >
         <Header />
         <main id="main-content">
           <DeprecationBanner />
diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
index f5d4ad04b247..a17939297b5f 100644
--- a/stylesheets/utilities.scss
+++ b/stylesheets/utilities.scss
@@ -24,6 +24,10 @@
   .no-print {
     display: none;
   }
+
+  .print-overflow-visible {
+    overflow: visible !important;
+  }
 }
 
 /* Opacity utilities