style: fix breadcrumb long query (#3467)

Fixes the styling issue with breadcrumbs for long paths. When the query is excessively long, the input text may overflow beyond the breadcrumb and become visible across it. <img width="1029" alt="Capture d’écran 2025-01-09 à 23 09 17" src="https://github.com/user-attachments/assets/e23a0d34-2709-4514-9c95-1fb527fccfc8" /> Co-authored-by: Nathan Toups <[email protected]>
gnolang · Jan 10, 2025 · 946efe4 · 946efe4
1 parent 5380c7f
commit 946efe4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/gno.land/pkg/gnoweb/components/breadcrumb.gohtml b/gno.land/pkg/gnoweb/components/breadcrumb.gohtml
@@ -1,16 +1,16 @@
 {{ define "breadcrumb" }}
-<ol data-role="header-breadcrumb-search" class="peer-focus-within:hidden flex text-gray-800 font-semibold relative bg-gray-100">
+<ol data-role="header-breadcrumb-search" class="peer-focus-within:hidden flex text-gray-800 font-semibold bg-gray-100 after:absolute after:w-full after:top-0 after:left-0 after:h-full after:block after:bg-gray-100 after:pointer-events-none">
     {{- range $index, $part := .Parts }}
         {{- if $index }}
-            <li class="flex before:content-['/'] before:px-[0.18rem] before:text-gray-300">
+            <li class="flex z-1 before:content-['/'] before:px-[0.18rem] before:text-gray-300">
         {{- else }}
-            <li>
+            <li class="z-1">
         {{- end }}
         <a class="hover:bg-green-600 hover:text-light bg-light inline-block rounded-sm px-1 py-px" href="{{ $part.URL }}">{{ $part.Name }}</a>
         </li>
     {{- end }}
     {{- if .Args }}
-        <li class="flex before:content-[':'] before:px-[0.18rem] before:text-gray-300">
+        <li class="flex z-1 before:content-[':'] before:px-[0.18rem] before:text-gray-300">
             <a class="text-light bg-gray-300 inline-block rounded-sm px-1 py-px">{{ .Args }}</a>
         </li>
     {{- end }}