From bce910fa1c3ac7fefa496759b6f034fe4ec4628f Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Fri, 11 Sep 2026 03:26:27 -0400
Subject: [PATCH] fix(campaigns): wrap campaign cards evenly with flex layout

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../frontend/intelligence/CampaignsList.tsx          | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/frontend/intelligence/CampaignsList.tsx b/src/components/frontend/intelligence/CampaignsList.tsx
index bd97a68..9173c52 100644
--- a/src/components/frontend/intelligence/CampaignsList.tsx
+++ b/src/components/frontend/intelligence/CampaignsList.tsx
@@ -65,9 +65,11 @@ export function CampaignsList({ campaigns }: CampaignsListProps) {
                   Command-sanctioned operations at the heart of the unit&apos;s story.
                 </p>
               </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-6xl mx-auto">
+              <div className="flex flex-wrap justify-center gap-3 w-full max-w-6xl mx-auto">
                 {officialCampaigns.map((campaign) => (
-                  <CampaignCard key={campaign.id} campaign={campaign} size="lg" />
+                  <div key={campaign.id} className="w-full md:w-[calc(50%-6px)]">
+                    <CampaignCard campaign={campaign} size="lg" />
+                  </div>
                 ))}
               </div>
             </section>
@@ -85,9 +87,11 @@ export function CampaignsList({ campaigns }: CampaignsListProps) {
                   Player-made side operations and stories, open to everyone.
                 </p>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full max-w-6xl mx-auto">
+              <div className="flex flex-wrap justify-center gap-3 w-full max-w-6xl mx-auto">
                 {communityCampaigns.map((campaign) => (
-                  <CampaignCard key={campaign.id} campaign={campaign} size="sm" />
+                  <div key={campaign.id} className="w-full sm:w-[calc(50%-6px)] lg:w-[calc(33.333%-8px)]">
+                    <CampaignCard campaign={campaign} size="sm" />
+                  </div>
                 ))}
               </div>
             </section>