templates: fix table overflow on small screen (#86)

asoul-sig · Apr 26, 2022 · 212bd1c · 212bd1c
1 parent 3ded42a
commit 212bd1c
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/templates/docs/page.html b/templates/docs/page.html
@@ -216,8 +216,8 @@ <h5 class="text-slate-900 font-semibold mb-2 text-sm leading-3 dark:text-slate-1
     </div>
 
     <div class="fixed z-50 inset-0 overflow-y-auto" style="display: none" x-show="showNavbar">
-      <div class="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-slate-900/80" id="headlessui-dialog-overlay-15" aria-hidden="true"></div>
-      <div class="relative bg-white w-80 max-w-[calc(100%-3rem)] p-6 dark:bg-slate-800">
+      <div class="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-slate-900/80" aria-hidden="true"></div>
+      <div class="relative bg-white w-80 max-w-[calc(100%-3rem)] p-6 dark:bg-slate-800 h-screen">
         <button type="button" class="absolute z-10 top-5 right-5 w-8 h-8 flex items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" tabindex="0" @click="showNavbar = false">
           <span class="sr-only">Close navigation</span>
           <svg viewBox="0 0 10 10" class="w-2.5 h-2.5 overflow-visible">
@@ -227,5 +227,17 @@ <h5 class="text-slate-900 font-semibold mb-2 text-sm leading-3 dark:text-slate-1
         {{template "docs/navbar" .}}
       </div>
     </div>
+
+    <script>
+      // Wrap all <table> with a <div> to be able to have "overflow-y: auto"
+      document.querySelectorAll('table').forEach(
+        function(table) {
+          var div = document.createElement('div');
+          div.style.overflowY = 'auto';
+          table.parentNode.insertBefore(div, table);
+          div.appendChild(table);
+        }
+      );
+    </script>
   </body>
 </html>