From 34b8e42ffbde14e6cb0002eefc89f5fbc02e99cf Mon Sep 17 00:00:00 2001
From: Juliet <salut@juliet.paris>
Date: Tue, 12 May 2026 06:54:23 +0200
Subject: [PATCH] bottom controls fade

---
 src/styles/index.css     | 8 ++++++++
 src/views/collection.tsx | 2 +-
 src/views/labels.tsx     | 2 +-
 src/views/pds.tsx        | 2 +-
 src/views/repo/blob.tsx  | 2 +-
 src/views/repo/index.tsx | 2 +-
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index d76ae60..2f8115b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -33,6 +33,14 @@ html {
   scrollbar-gutter: stable both-edges;
 }
 
+.bottom-controls-fade::before {
+  @apply pointer-events-none absolute inset-x-0 -top-6 h-6 bg-linear-to-t from-neutral-100 to-transparent content-[''];
+}
+
+.dark .bottom-controls-fade::before {
+  @apply from-dark-500;
+}
+
 .tabler--binary-tree-filled {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 1a3 3 0 0 1 2.348 4.868l2 3.203Q18.665 9 19 9a3 3 0 1 1-2.347 1.132l-2-3.203a3 3 0 0 1-1.304 0l-2.001 3.203c.408.513.652 1.162.652 1.868s-.244 1.356-.653 1.868l2.002 3.203Q13.664 17 14 17a3 3 0 1 1-2.347 1.132L9.65 14.929a3 3 0 0 1-1.302 0l-2.002 3.203a3 3 0 1 1-1.696-1.06l2.002-3.204A3 3 0 0 1 9.65 9.07l2.002-3.202A3 3 0 0 1 14 1'/%3E%3C/svg%3E");
 }
diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index af94135..64288ca 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -629,7 +629,7 @@ const CollectionView = () => {
 
         {/* Fixed bottom panel */}
         <Show when={!lexicon.showSchema() && records.length > 1}>
-          <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
+          <div class="bottom-controls-fade dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 bg-neutral-100 px-3 pt-3 pb-6">
             <div class="flex w-full max-w-lg items-center gap-2">
               {/* Filter */}
               <div
diff --git a/src/views/labels.tsx b/src/views/labels.tsx
index 90ab787..7bece45 100644
--- a/src/views/labels.tsx
+++ b/src/views/labels.tsx
@@ -275,7 +275,7 @@ export const LabelView = () => {
         </div>
 
         <Show when={labels().length > 1}>
-          <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
+          <div class="bottom-controls-fade dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 bg-neutral-100 px-3 pt-3 pb-6">
             <div
               class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 text-sm dark:border-neutral-700"
               onClick={(e) => {
diff --git a/src/views/pds.tsx b/src/views/pds.tsx
index 813a497..bd2190e 100644
--- a/src/views/pds.tsx
+++ b/src/views/pds.tsx
@@ -441,7 +441,7 @@ const PdsView = () => {
           </div>
         </div>
         <Show when={!location.hash || location.hash === "#repos"}>
-          <div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center border-t border-neutral-200 bg-neutral-100 pt-3 pb-6 dark:border-neutral-700">
+          <div class="bottom-controls-fade dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100 pt-3 pb-6">
             <div class="flex items-center gap-3">
               <p>
                 {repos()?.length} loaded
diff --git a/src/views/repo/blob.tsx b/src/views/repo/blob.tsx
index 7a31708..98541fd 100644
--- a/src/views/repo/blob.tsx
+++ b/src/views/repo/blob.tsx
@@ -46,7 +46,7 @@ export const BlobView = (props: { pds: string; repo: string }) => {
           </For>
         </div>
       </Show>
-      <div class="dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center border-t border-neutral-200 bg-neutral-100 pt-3 pb-6 dark:border-neutral-700">
+      <div class="bottom-controls-fade dark:bg-dark-500 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100 pt-3 pb-6">
         <div class="flex min-w-50 items-center justify-around gap-3">
           <p>
             {blobs()?.length} blob{(blobs()?.length ?? 0 > 1) ? "s" : ""}
diff --git a/src/views/repo/index.tsx b/src/views/repo/index.tsx
index bd680fc..b671d88 100644
--- a/src/views/repo/index.tsx
+++ b/src/views/repo/index.tsx
@@ -572,7 +572,7 @@ const RepoView = () => {
         </div>
 
         <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
-          <div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
+          <div class="bottom-controls-fade dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 bg-neutral-100 px-3 pt-3 pb-6">
             <div
               class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2 text-sm dark:border-neutral-700"
               onClick={(e) => {
-- 
2.51.2