Only stick header on desktop

On mobile, it takes up a huge amount of the viewport

static/src/scss/_hero.scss

@@ -11,8 +11,6 @@ section.hero {
   margin-bottom: 1.5rem;
   background-color: $white;
   display: block;
-  position: sticky;
-  top: 0;
 
   @include dark-mode {
     background-color: $dark-mode-background;
@@ -30,10 +28,6 @@ section.hero {
     }
   }
 
-  &.stuck {
-    box-shadow: $shadow;
-  }
-
   .hero-body {
     padding: 0;
   }
@@ -108,6 +102,21 @@ section.hero {
   .content-details {
     margin-bottom: 0.25rem;
   }
+
+  @include mobile {
+    .hero-buttons {
+      display: none;
+    }
+  }
+
+  @include tablet {
+    position: sticky;
+    top: 0;
+
+    &.stuck {
+      box-shadow: $shadow;
+    }
+  }
 }
 
 #view-restriction-banner {

website/common/templates/wagtail_base.html

@@ -30,7 +30,7 @@
 
             {% include "common/content-details.html" %}
           </div>
-          <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
+          <div class="column is-narrow dropdown-wrapper hero-buttons is-grouped">
             {% block hero_buttons %}
               {% if page.show_table_of_contents %}
                 <div class="dropdown is-hoverable is-right" id="table-of-contents">