From bf81cd51b7e6b196023e49ea429143f36965dbc8 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 26 Nov 2025 23:35:44 +0100
Subject: [PATCH] style: use multi-column layout for explore writings

---
 src/components/Explore.tsx      |  4 ++--
 src/styles/components/cards.css | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx
index 5c4a4701..ac2a43e5 100644
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -595,7 +595,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       case 'highlights':
         if (showSkeletons) {
           return (
-            <div className="explore-grid">
+            <div className="explore-grid single-column">
               {Array.from({ length: 8 }).map((_, i) => (
                 <HighlightSkeleton key={i} />
               ))}
@@ -607,7 +607,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
             <span>No highlights to show for the selected scope.</span>
           </div>
         ) : (
-          <div className="explore-grid">
+          <div className="explore-grid single-column">
             {classifiedHighlights.map((highlight) => (
               <HighlightItem
                 key={highlight.id}
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index de251e2f..72997403 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -277,7 +277,15 @@
 .explore-loading { min-height: 0; padding: 0.25rem 0; }
 .explore-error { color: rgb(239 68 68); /* red-500 */ }
 .explore-empty { color: var(--color-text-secondary); }
-.explore-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
+.explore-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+.explore-grid.single-column {
+  grid-template-columns: 1fr;
+}
 .blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
 .blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
 .blog-post-card.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #fde047) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #fde047) 25%, transparent); }