From ff1f9cc170d9975cda7f2d8ee80a3614e53fcebf Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 25 Jun 2026 18:34:19 +0200
Subject: [PATCH] appview: improve topbar search & z-index stacking

resolves
[TAN-523](https://linear.app/tangled/issue/TAN-523/inline-search-fixes)

Signed-off-by: eti <eti@eti.tf>
---
 appview/pages/static/topbar-search.js         |  6 +++++
 appview/pages/templates/layouts/repobase.html |  2 +-
 .../pages/templates/repo/fragments/diff.html  |  2 +-
 appview/pages/templates/repo/pulls/pull.html  |  4 ++--
 .../templates/search/fragments/quick.html     |  2 +-
 .../templates/user/fragments/repoCard.html    | 24 +++++++++++++++----
 input.css                                     |  2 +-
 7 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/appview/pages/static/topbar-search.js b/appview/pages/static/topbar-search.js
index cb1d40ca..a6f1e69d 100644
--- a/appview/pages/static/topbar-search.js
+++ b/appview/pages/static/topbar-search.js
@@ -31,12 +31,15 @@
 
     const openMobile = () => {
         const overlay = $("mobile-search-overlay");
+        const subs = $("subs");
         if (!overlay || overlay.classList.contains("opacity-100")) return;
 
         overlay.classList.remove("opacity-0", "pointer-events-none");
         overlay.classList.add("opacity-100", "pointer-events-auto");
         overlay.setAttribute("aria-hidden", "false");
 
+        subs?.classList.remove("z-30");
+
         savedScrollY = window.scrollY;
         Object.assign(document.body.style, {
             position: "fixed",
@@ -65,6 +68,7 @@
 
     const closeMobile = () => {
         const overlay = $("mobile-search-overlay");
+        const subs = $("subs");
         if (!overlay) return;
 
         overlay.classList.remove("opacity-100", "pointer-events-auto");
@@ -73,6 +77,8 @@
         overlay.style.height = "";
         overlay.style.top = "";
 
+        subs?.classList.add("z-30");
+
         const spacer = $("mobile-search-spacer");
         if (spacer) {
             spacer.style.height = "";
diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index a41ddbd8..be40e4a4 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -111,7 +111,7 @@
 {{ end }}
 
 {{ define "repoActions" }}
-  <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
+  <div class="w-full sm:w-fit grid grid-cols-3 gap-2">
     {{ template "fragments/starBtn"
       (dict "SubjectAt" .RepoInfo.RepoAt
             "IsStarred" .RepoInfo.IsStarred
diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
index 9315931b..8e74fbf7 100644
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -30,7 +30,7 @@
   {{ block "subsCheckbox" $ }} {{ end }}
 
   <!-- top bar -->
-  <div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}">
+  <div class="sticky top-0 z-10 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}">
     <!-- left panel toggle -->
     {{ template "filesToggle" . }}
 
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
index a2d84335..ea30d0a5 100644
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -172,9 +172,9 @@
   {{ end }}
 
   <!-- backdrop overlay - only visible on mobile when open -->
-  <div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-40"></div>
+  <div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-20"></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">
+  <div id="subs" class="fixed bottom-0 left-0 right-0 z-30 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden">
     <details open id="bottomSheet" class="rounded-t-2xl md:rounded-t shadow-lg md:shadow-none group/panel">
       <summary class="
         flex gap-4 items-center justify-between
diff --git a/appview/pages/templates/search/fragments/quick.html b/appview/pages/templates/search/fragments/quick.html
index e2480a03..bcec4cf9 100644
--- a/appview/pages/templates/search/fragments/quick.html
+++ b/appview/pages/templates/search/fragments/quick.html
@@ -30,7 +30,7 @@
 
 {{define "search/fragments/quickPage"}}
 {{- range .Repos -}}
-  {{ template "user/fragments/repoCard" (list $ . true false (dict) true) }}
+  {{ template "user/fragments/repoCard" (list $ . true false (dict) true true) }}
 {{- end -}}
 {{end}}
 
diff --git a/appview/pages/templates/user/fragments/repoCard.html b/appview/pages/templates/user/fragments/repoCard.html
index 4d65eb7f..056e3f81 100644
--- a/appview/pages/templates/user/fragments/repoCard.html
+++ b/appview/pages/templates/user/fragments/repoCard.html
@@ -1,23 +1,32 @@
 {{ define "user/fragments/repoCard" }}
-  {{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact]]] */}}
+  {{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact [,cardLink]]]] */}}
   {{ $root := index . 0 }}
   {{ $repo := index . 1 }}
   {{ $fullName := index . 2 }}
   {{ $starButton := false }}
   {{ $starData := dict }}
   {{ $compact := false }}
+  {{ $cardLink := false }}
   {{ if gt (len .) 3 }}
     {{ $starButton = index . 3 }}
     {{ if gt (len .) 4 }}
       {{ $starData = index . 4 }}
       {{ if gt (len .) 5 }}
         {{ $compact = index . 5 }}
+        {{ if gt (len .) 6 }}
+          {{ $cardLink = index . 6 }}
+        {{ end }}
       {{ end }}
     {{ end }}
   {{ end }}
 
   {{ with $repo }}
+    {{ $repoOwner := resolve .Did }}
+    {{ if $cardLink }}
+    <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="hover:no-underline {{ if not $compact }} min-h-32 {{ end }} {{ if $compact }} hover:bg-gray-100 dark:hover:bg-gray-800/80 focus-within:bg-gray-100 dark:focus-within:bg-gray-800/80 {{ end }} py-4 px-6 gap-1 flex flex-col drop-shadow-sm bg-white dark:bg-gray-800">
+    {{ else }}
     <div class="{{ if not $compact }} min-h-32 {{ end }} {{ if $compact }} focus-within:bg-gray-100 dark:focus-within:bg-gray-800/80 {{ end }} py-4 px-6 gap-1 flex flex-col drop-shadow-sm bg-white dark:bg-gray-800">
+    {{ end }}
       <div class="dark:text-white flex items-center justify-between">
         <div class="flex items-center min-w-0 flex-1 mr-2">
           {{ if .Source }}
@@ -25,11 +34,12 @@
           {{ else }}
             {{ i "book-marked" "w-4 h-4 mr-1.5 shrink-0" }}
           {{ end }}
-          {{ $repoOwner := resolve .Did }}
-          {{- if $fullName -}}
-            <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="truncate min-w-0 {{ if $compact }} focus:outline-none {{ end }}">{{ $repoOwner }}/{{ .Name }}</a>
+          {{- $label := .Name -}}
+          {{- if $fullName -}}{{- $label = print $repoOwner "/" .Name -}}{{- end -}}
+          {{- if $cardLink -}}
+            <span class="truncate min-w-0">{{ $label }}</span>
           {{- else -}}
-            <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="truncate min-w-0 {{ if $compact }} focus:outline-none {{ end }}">{{ .Name }}</a>
+            <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="truncate min-w-0 {{ if $compact }} focus:outline-none {{ end }}">{{ $label }}</a>
           {{- end -}}
         </div>
         {{ if and $starButton $root.LoggedInUser }}
@@ -47,7 +57,11 @@
       {{ if .RepoStats }}
         {{ block "repoStats" .RepoStats }}{{ end }}
       {{ end }}
+    {{ if $cardLink }}
+    </a>
+    {{ else }}
     </div>
+    {{ end }}
   {{ end }}
 {{ end }}
 
diff --git a/input.css b/input.css
index f5c4e15b..5f8f0cfa 100644
--- a/input.css
+++ b/input.css
@@ -200,7 +200,7 @@
 
     @layer components {
         .btn {
-            @apply relative z-10 inline-flex overflow-hidden items-center justify-center
+            @apply relative z-0 inline-flex overflow-hidden items-center justify-center
           min-h-[32px] px-2 py-[6px] gap-1.5
           rounded border border-gray-200 dark:border-gray-700
           bg-white dark:bg-gray-800
-- 
2.51.2