From dcc645e413e4cc9971e35bb675435c4930d1ef2b Mon Sep 17 00:00:00 2001
From: Semphris <semphris@protonmail.com>
Date: Sun, 5 Jan 2025 14:16:43 -0500
Subject: [PATCH] Fix HTML examples template tabs

Tab labels now follow their drawer again. Also, to avoid tabs covering
up code or debugging logs, the tab label that's on top (and therefore
not automatically hidden behind the other drawer when that drawer
opens) will now automatically hide itself when the other drawer is
opened.
---
 examples/template.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/template.html b/examples/template.html
index d6a730507f..524aba9c53 100644
--- a/examples/template.html
+++ b/examples/template.html
@@ -76,8 +76,8 @@
       }
 
       #output-container::before {
-        position: fixed;
-        bottom: 0;
+        position: absolute;
+        bottom: 100%;
         right: 1rem;
 
         content: 'Console';
@@ -134,8 +134,8 @@
       }
 
       #source-code::before {
-        position: fixed;
-        bottom: 0;
+        position: absolute;
+        bottom: 100%;
         left: 1rem;
 
         content: 'Source code';
@@ -143,6 +143,10 @@
         background: linear-gradient(to bottom, #789, #e0eaee);
         padding: 0.75rem 1.5rem;
         border-radius: 0.5rem 0.5rem 0 0;
+
+        /* Used for a hack to avoid tab labels showing on top of tabs; see
+           comment below for details. */
+        transition: bottom 0.25s;
       }
 
       #source-code:hover,
@@ -164,6 +168,14 @@
         overflow: scroll;
       }
 
+      /* Hack: Sinze z-index only goes one way, and both tab labels should be
+         behind each other's tab, put the former on top (higher z-index) and
+         make the latter one disappear when the former is hovered. */
+      #output-container:hover ~ #source-code::before,
+      #output-container:focus-within ~ #source-code::before {
+        bottom: -100%;
+      }
+
       @media (prefers-color-scheme: dark) {
         main > #sidebar {
           border-color: rgba(48, 54, 61, 0.7);