From 466754c40b3a149abf2aa99655b0475a85949830 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 21 Jan 2026 10:21:20 +0000
Subject: [PATCH] appview/pages/pull: use js to trigger backdrop opacity

we have several nested details tags here and i can't seem to figure it
out using plain css.

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/templates/repo/pulls/pull.html | 51 ++++++++++++++++++++++++++++-----------------------
 1 file(s) changed, 28 insertion(s)(+), 23 deletion(s)(-)

diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -22,18 +22,34 @@
   <script>
     (function() {
       const details = document.getElementById('bottomSheet');
+      const backdrop = document.getElementById('bottomSheetBackdrop');
       const isDesktop = () => window.matchMedia('(min-width: 768px)').matches;
+
+      // function to update backdrop
+      const updateBackdrop = () => {
+        if (backdrop) {
+          if (details.open && !isDesktop()) {
+            backdrop.classList.remove('opacity-0', 'pointer-events-none');
+            backdrop.classList.add('opacity-100', 'pointer-events-auto');
+          } else {
+            backdrop.classList.remove('opacity-100', 'pointer-events-auto');
+            backdrop.classList.add('opacity-0', 'pointer-events-none');
+          }
+        }
+      };
 
       // close on mobile initially
       if (!isDesktop()) {
         details.open = false;
       }
+      updateBackdrop(); // initialize backdrop
 
       // prevent closing on desktop
       details.addEventListener('toggle', function(e) {
         if (isDesktop() && !this.open) {
           this.open = true;
         }
+        updateBackdrop();
       });
 
       const mediaQuery = window.matchMedia('(min-width: 768px)');
@@ -45,7 +61,17 @@
           // switched to mobile - close
           details.open = false;
         }
+        updateBackdrop();
       });
+
+      // close when clicking backdrop
+      if (backdrop) {
+        backdrop.addEventListener('click', () => {
+          if (!isDesktop()) {
+            details.open = false;
+          }
+        });
+      }
     })();
   </script>
 {{ end }}
@@ -109,16 +135,11 @@
 {{ define "subsPanel" }}
   {{ $root := index . 2 }}
   {{ $pull := $root.Pull }}
-
   <!-- backdrop overlay - only visible on mobile when open -->
-  <div class="
-    fixed inset-0 bg-black/50 z-50 md:hidden opacity-0
-    pointer-events-none transition-opacity duration-300
-    has-[~#subs_details[open]]:opacity-100 has-[~#subs_details[open]]:pointer-events-auto">
-  </div>
+  <div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-40"></div>
   <!-- right panel - bottom sheet on mobile, side panel on desktop -->
   <div id="subs" class="fixed bottom-0 left-0 right-0 z-50 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden">
-    <details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
+    <details open id="bottomSheet" class="rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
       <summary class="
         flex gap-4 items-center justify-between
         rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12
@@ -142,22 +163,6 @@
   {{ $pull := $root.Pull }}
   {{ $latest := $pull.LastRoundNumber }}
   <div class="flex items-center gap-2 text-sm">
-    <!--{{ if $root.IsInterdiff }}
-      <span>
-        viewing interdiff of
-        <span class="font-mono">#{{ $root.ActiveRound }}</span>
-        and
-        <span class="font-mono">#{{ sub $root.ActiveRound 1 }}</span>
-      </span>
-    {{ else }}
-      {{ if ne $root.ActiveRound $latest }}
-        <span>(outdated)</span>
-        <span class="before:content-['·']"></span>
-        <a class="underline" href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $latest }}?{{ safeUrl $root.DiffOpts.Encode }}">
-          view latest
-        </a>
-      {{ end }}
-    {{ end }}-->
     <span class="md:hidden inline">
       <span class="inline group-open:hidden">{{ i "chevron-up" "size-4" }}</span>
       <span class="hidden group-open:inline">{{ i "chevron-down" "size-4" }}</span>

--
tangled.sh