From bad2501f2b37b38076685525f15b421fae7b87b2 Mon Sep 17 00:00:00 2001
From: Jason Crawford <jason@jasoncrawford.org>
Date: Sun, 22 Feb 2026 06:53:18 -0800
Subject: [PATCH 1/2] design: switch sites to list layout, brighten success
 green

Change the main status page from a 2D card grid to a 1D full-width list,
and update the success/up color from #5A8A5A to #2DA44E across all pages
for a brighter, more recognizable green.

Closes #37

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/incidents/[id]/page.tsx |  6 ++---
 src/app/page.tsx                | 40 ++++++++++++++++-----------------
 src/app/sites/[id]/page.tsx     |  8 +++----
 src/components/AddSiteCard.tsx  |  9 ++++----
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/app/incidents/[id]/page.tsx b/src/app/incidents/[id]/page.tsx
index 1fca901..6e5dd96 100644
--- a/src/app/incidents/[id]/page.tsx
+++ b/src/app/incidents/[id]/page.tsx
@@ -152,7 +152,7 @@ export default async function IncidentDetailPage({
               <button
                 type="submit"
                 className="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold text-white rounded cursor-pointer transition-colors"
-                style={{ backgroundColor: "#5A8A5A" }}
+                style={{ backgroundColor: "#2DA44E" }}
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -206,14 +206,14 @@ export default async function IncidentDetailPage({
                     className="w-2.5 h-2.5 rounded-full shrink-0"
                     style={{
                       backgroundColor:
-                        check.status === "failure" ? "#C4453C" : "#5A8A5A",
+                        check.status === "failure" ? "#C4453C" : "#2DA44E",
                     }}
                   />
                   <span
                     className="text-sm font-medium min-w-[80px]"
                     style={{
                       color:
-                        check.status === "failure" ? "#C4453C" : "#5A8A5A",
+                        check.status === "failure" ? "#C4453C" : "#2DA44E",
                     }}
                   >
                     {check.status === "failure" ? "Failing" : "Passing"}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7a6ab38..9a2443f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -132,7 +132,7 @@ export default async function StatusPage() {
             No sites are being monitored yet.
           </p>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <div className="flex flex-col gap-3">
             {sites.map((site) => (
               <div
                 key={site.id}
@@ -141,7 +141,7 @@ export default async function StatusPage() {
                   backgroundColor: "#FFFFFF",
                   border: "1px solid #E8E4DF",
                   borderRadius: "4px",
-                  padding: "16px 18px",
+                  padding: "14px 18px",
                 }}
               >
                 <Link
@@ -149,7 +149,7 @@ export default async function StatusPage() {
                   className="block no-underline"
                   style={{ color: "inherit" }}
                 >
-                  <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-3 flex-wrap">
                     <div className="flex items-center gap-2.5 min-w-0">
                       <span
                         className="w-2 h-2 rounded-full shrink-0"
@@ -157,34 +157,34 @@ export default async function StatusPage() {
                           backgroundColor:
                             site.lastCheck?.status === "failure"
                               ? "#C4453C"
-                              : "#5A8A5A",
+                              : "#2DA44E",
                         }}
                       />
                       <span
-                        className="text-sm font-bold truncate"
+                        className="text-sm font-bold"
                         style={{ color: "#1A1A1A" }}
                       >
                         {site.name}
                       </span>
                     </div>
-                  </div>
-                  <div
-                    className="mt-1.5 text-xs truncate"
-                    style={{ color: "#5C5C5C" }}
-                  >
-                    {site.url}
-                  </div>
-                  <div
-                    className="mt-2 text-[11px]"
-                    style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
-                  >
-                    {site.lastCheck
-                      ? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
-                      : "No checks yet"}
+                    <span
+                      className="text-xs"
+                      style={{ color: "#5C5C5C" }}
+                    >
+                      {site.url}
+                    </span>
+                    <span
+                      className="ml-auto text-[11px] shrink-0"
+                      style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
+                    >
+                      {site.lastCheck
+                        ? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
+                        : "No checks yet"}
+                    </span>
                   </div>
                 </Link>
                 {isAdmin && (
-                  <div className="absolute top-3 right-3 z-10">
+                  <div className="absolute top-1/2 -translate-y-1/2 right-3 z-10">
                     <SiteFormDialog
                       mode="edit"
                       siteId={site.id}
diff --git a/src/app/sites/[id]/page.tsx b/src/app/sites/[id]/page.tsx
index 833f938..2b7bef6 100644
--- a/src/app/sites/[id]/page.tsx
+++ b/src/app/sites/[id]/page.tsx
@@ -83,9 +83,9 @@ export default async function SiteDetailPage({
           <div className="inline-flex items-center gap-2 text-sm font-semibold">
             <span
               className="w-2.5 h-2.5 rounded-full"
-              style={{ backgroundColor: isDown ? "#C4453C" : "#5A8A5A" }}
+              style={{ backgroundColor: isDown ? "#C4453C" : "#2DA44E" }}
             />
-            <span style={{ color: isDown ? "#C4453C" : "#5A8A5A" }}>
+            <span style={{ color: isDown ? "#C4453C" : "#2DA44E" }}>
               {isDown ? "Down" : "Up"}
             </span>
           </div>
@@ -254,12 +254,12 @@ export default async function SiteDetailPage({
                           <span
                             className="w-1.5 h-1.5 rounded-full"
                             style={{
-                              backgroundColor: isFailure ? "#C4453C" : "#5A8A5A",
+                              backgroundColor: isFailure ? "#C4453C" : "#2DA44E",
                             }}
                           />
                           <span
                             className="text-sm font-medium"
-                            style={{ color: isFailure ? "#C4453C" : "#5A8A5A" }}
+                            style={{ color: isFailure ? "#C4453C" : "#2DA44E" }}
                           >
                             {isFailure
                               ? check.error ?? "Failure"
diff --git a/src/components/AddSiteCard.tsx b/src/components/AddSiteCard.tsx
index 4b9c029..8ccd0fe 100644
--- a/src/components/AddSiteCard.tsx
+++ b/src/components/AddSiteCard.tsx
@@ -6,19 +6,18 @@ export default function AddSiteCard() {
       mode="add"
       trigger={
         <button
-          className="flex items-center justify-center flex-col gap-1.5 rounded cursor-pointer w-full"
+          className="flex items-center gap-2 rounded cursor-pointer w-full"
           style={{
             background: "transparent",
             border: "1.5px dashed #D4CFC9",
-            padding: "24px 18px",
+            padding: "12px 18px",
             color: "#8A8A8A",
-            minHeight: "108px",
             transition: "border-color 0.15s, color 0.15s",
           }}
         >
           <svg
-            width="20"
-            height="20"
+            width="16"
+            height="16"
             viewBox="0 0 16 16"
             fill="none"
             stroke="currentColor"

From 899ccb886776289cd4d9563a9ee172f086f51ecf Mon Sep 17 00:00:00 2001
From: Jason Crawford <jason@jasoncrawford.org>
Date: Sun, 22 Feb 2026 07:02:54 -0800
Subject: [PATCH 2/2] fix: make entire site card clickable with overlay link

Use an absolutely-positioned Link covering the full card area so the
whole row is a click target. The edit button sits at z-10 above the
overlay so it remains independently clickable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/page.tsx | 63 ++++++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9a2443f..165385b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -146,43 +146,42 @@ export default async function StatusPage() {
               >
                 <Link
                   href={`/sites/${site.id}`}
-                  className="block no-underline"
-                  style={{ color: "inherit" }}
-                >
-                  <div className="flex items-center gap-3 flex-wrap">
-                    <div className="flex items-center gap-2.5 min-w-0">
-                      <span
-                        className="w-2 h-2 rounded-full shrink-0"
-                        style={{
-                          backgroundColor:
-                            site.lastCheck?.status === "failure"
-                              ? "#C4453C"
-                              : "#2DA44E",
-                        }}
-                      />
-                      <span
-                        className="text-sm font-bold"
-                        style={{ color: "#1A1A1A" }}
-                      >
-                        {site.name}
-                      </span>
-                    </div>
+                  className="absolute inset-0 z-0"
+                  aria-label={site.name}
+                />
+                <div className="flex items-center gap-3 flex-wrap">
+                  <div className="flex items-center gap-2.5 min-w-0">
                     <span
-                      className="text-xs"
-                      style={{ color: "#5C5C5C" }}
-                    >
-                      {site.url}
-                    </span>
+                      className="w-2 h-2 rounded-full shrink-0"
+                      style={{
+                        backgroundColor:
+                          site.lastCheck?.status === "failure"
+                            ? "#C4453C"
+                            : "#2DA44E",
+                      }}
+                    />
                     <span
-                      className="ml-auto text-[11px] shrink-0"
-                      style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
+                      className="text-sm font-bold"
+                      style={{ color: "#1A1A1A" }}
                     >
-                      {site.lastCheck
-                        ? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
-                        : "No checks yet"}
+                      {site.name}
                     </span>
                   </div>
-                </Link>
+                  <span
+                    className="text-xs"
+                    style={{ color: "#5C5C5C" }}
+                  >
+                    {site.url}
+                  </span>
+                  <span
+                    className="ml-auto text-[11px] shrink-0"
+                    style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
+                  >
+                    {site.lastCheck
+                      ? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
+                      : "No checks yet"}
+                  </span>
+                </div>
                 {isAdmin && (
                   <div className="absolute top-1/2 -translate-y-1/2 right-3 z-10">
                     <SiteFormDialog