From c481bafc7b6a48c4c17f92b899e5fdfb98399d02 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Tue, 31 Mar 2026 06:15:25 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Replaced=20plain=20list=20rendering=20o?=
 =?UTF-8?q?f=20related=20techniques=20with=20a=20respon=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T02
---
 frontend/src/App.css                 | 55 +++++++++++++++++++++++-----
 frontend/src/api/public-client.ts    |  3 ++
 frontend/src/pages/TechniquePage.tsx | 22 +++++++----
 3 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index f21728f..69d9525 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1781,27 +1781,62 @@ a.app-footer__repo:hover {
   margin-bottom: 0.5rem;
 }
 
-.technique-related__list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
+.technique-related__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
 }
 
-.technique-related__list a {
+@media (min-width: 600px) {
+  .technique-related__grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.related-card {
+  background: var(--color-surface-card);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.related-card__title {
   color: var(--color-link-accent);
   text-decoration: none;
+  font-weight: 600;
   font-size: 0.9375rem;
 }
 
-.technique-related__list a:hover {
+.related-card__title:hover {
   text-decoration: underline;
 }
 
-.technique-related__rel {
-  font-size: 0.75rem;
+.related-card__creator {
+  font-size: 0.8125rem;
   color: var(--color-text-muted);
-  margin-left: 0.375rem;
+}
+
+.related-card__badge {
+  display: inline-block;
+  align-self: flex-start;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  background: var(--color-badge-bg, rgba(255, 255, 255, 0.08));
+  color: var(--color-badge-text, var(--color-text-muted));
+}
+
+.related-card__reason {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--color-text-muted);
+  margin: 0;
 }
 
 /* ══════════════════════════════════════════════════════════════════════════════
diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts
index 0094fcd..18d2980 100644
--- a/frontend/src/api/public-client.ts
+++ b/frontend/src/api/public-client.ts
@@ -49,6 +49,9 @@ export interface RelatedLinkItem {
   target_title: string;
   target_slug: string;
   relationship: string;
+  creator_name: string;
+  topic_category: string;
+  reason: string;
 }
 
 export interface TechniquePageDetail {
diff --git a/frontend/src/pages/TechniquePage.tsx b/frontend/src/pages/TechniquePage.tsx
index 842fe40..c670987 100644
--- a/frontend/src/pages/TechniquePage.tsx
+++ b/frontend/src/pages/TechniquePage.tsx
@@ -495,18 +495,24 @@ export default function TechniquePage() {
       {technique.related_links.length > 0 && (
         <section className="technique-related">
           <h2>Related Techniques</h2>
-          <ul className="technique-related__list">
+          <div className="technique-related__grid">
             {technique.related_links.map((link) => (
-              <li key={link.target_slug}>
-                <Link to={`/techniques/${link.target_slug}`}>
+              <div key={link.target_slug} className="related-card">
+                <Link to={`/techniques/${link.target_slug}`} className="related-card__title">
                   {link.target_title}
                 </Link>
-                <span className="technique-related__rel">
-                  ({link.relationship})
-                </span>
-              </li>
+                {link.creator_name && (
+                  <span className="related-card__creator">{link.creator_name}</span>
+                )}
+                {link.topic_category && (
+                  <span className="related-card__badge">{link.topic_category}</span>
+                )}
+                {link.reason && (
+                  <p className="related-card__reason">{link.reason}</p>
+                )}
+              </div>
             ))}
-          </ul>
+          </div>
         </section>
       )}
         </div>