From dc811d08e370f1069a9c36caf64fc54bb4d323f4 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Thu, 30 Jul 2026 13:53:43 -0600
Subject: [PATCH] ui: put the card mimetype accent on the bottom edge

Roland's call, and the better one: along the top the accent sat immediately
against the poster's own top border, so the two edges competed.  On the bottom it
closes the card and reads as a property of the whole thing rather than a header
rule.
---
 app/src/components/ThemeSamplePage.js | 2 +-
 app/src/components/ui/Surfaces.tsx    | 3 ++-
 app/src/components/ui/ui.test.js      | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/components/ThemeSamplePage.js b/app/src/components/ThemeSamplePage.js
index 80083a7e..fc898fd9 100644
--- a/app/src/components/ThemeSamplePage.js
+++ b/app/src/components/ThemeSamplePage.js
@@ -398,7 +398,7 @@ export function ThemeSamplePage() {
                 />)}
             </CardGroup>
             <p style={{fontSize: 12, color: 'var(--muted)', marginTop: 10}}>
-                The top edge carries the file type's colour, so a grid of results is
+                The bottom edge carries the file type's colour, so a grid of results is
                 scannable by kind before any title is read. It comes from a token, so night
                 and amber render the accent in their own single hue rather than four.
             </p>
diff --git a/app/src/components/ui/Surfaces.tsx b/app/src/components/ui/Surfaces.tsx
index 7389727e..1951aa99 100644
--- a/app/src/components/ui/Surfaces.tsx
+++ b/app/src/components/ui/Surfaces.tsx
@@ -148,7 +148,8 @@ export function Card({media, title, meta, children, onClick, color, className}:
             flexDirection: 'column',
             // An accent edge rather than a tinted surface: the design rules keep surfaces
             // flat, and a 3px edge survives night mode without becoming a bright patch.
-            borderTop: color ? `3px solid var(--${color})` : undefined,
+            // Along the bottom, where it does not compete with the poster's top edge.
+            borderBottom: color ? `3px solid var(--${color})` : undefined,
         }}
     >
         {media && <div style={{borderBottom: '1px solid var(--border)'}}>{media}</div>}
diff --git a/app/src/components/ui/ui.test.js b/app/src/components/ui/ui.test.js
index 53dc2666..f0cac345 100644
--- a/app/src/components/ui/ui.test.js
+++ b/app/src/components/ui/ui.test.js
@@ -440,13 +440,13 @@ describe('Card', () => {
         // files had dropped the accent because our Card had no equivalent.
         const {container} = renderUI(<Card title='Water Storage.pdf' color='red'/>);
 
-        expect(container.firstChild).toHaveStyle({borderTop: '3px solid var(--red)'});
+        expect(container.firstChild).toHaveStyle({borderBottom: '3px solid var(--red)'});
     });
 
     it('has no accent when no colour is given', () => {
         const {container} = renderUI(<Card title='Plain'/>);
 
-        expect(container.firstChild.style.borderTop).toBe('');
+        expect(container.firstChild.style.borderBottom).toBe('');
     });
 });