From 749189c364df4aae49d2a51a2c24d492855fe8a8 Mon Sep 17 00:00:00 2001
From: Alex Soffronow Pagonidis
 <237136924+alex-clickhouse@users.noreply.github.com>
Date: Sun, 9 Aug 2026 17:39:36 +0000
Subject: [PATCH] Give notification body text the width of its card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The status/type badges sat beside the text in a `shrink-0` column, so
they held a fixed ~127px of a 330px row whatever the viewport. On a phone
that left the body wrapping at 191px — a third of the card spent on two
short chips, and prose breaking every four or five words.

Below `sm` the badges take a row of their own above the title and the
text gets the full card: body width goes 191px → 346px. Only spans move,
so nothing changes about the tab order.

Two things found alongside it:

- the page scroll containers used `p-6`, so 48px of a 412px viewport went
  to padding before the card's own `p-4`. Now `p-4 md:p-6` on the three
  list pages.
- the priority dot was centred against the whole title block, so a title
  long enough to wrap left the dot floating beside its second line rather
  than marking the first. Aligned to the top with a small offset.

Desktop is unchanged: the badges stay beside the title from `sm` up.

Refs #271
---
 web/src/pages/NotificationsPage.tsx | 19 +++++++++++++------
 web/src/pages/PlansPage.tsx         |  2 +-
 web/src/pages/TasksPage.tsx         |  2 +-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/NotificationsPage.tsx b/web/src/pages/NotificationsPage.tsx
index bfdc892d..1d267da2 100644
--- a/web/src/pages/NotificationsPage.tsx
+++ b/web/src/pages/NotificationsPage.tsx
@@ -194,10 +194,17 @@ function NotificationCard({ notif }: { notif: Notification }) {
     <div className={`p-4 bg-surface border rounded-lg transition-colors ${
       notif.status === 'pending' ? 'border-border-subtle' : 'border-border-subtle'
     }`}>
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            {priorityDot && <span className={`w-2 h-2 rounded-full shrink-0 ${priorityDot}`} />}
+      {/* The badge column is shrink-0, so beside the text it costs a fixed
+          ~127px — over a third of the card on a phone, which left the body
+          wrapping at ~190px. Below `sm` the badges take a row of their own
+          above the title instead, and the text gets the full card width. */}
+      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 sm:gap-3">
+        <div className="min-w-0 flex-1 order-1 sm:order-none">
+          {/* items-start, not items-center: a title long enough to wrap was
+              centring the priority dot against the whole block, leaving it
+              floating beside the second line. */}
+          <div className="flex items-start gap-2">
+            {priorityDot && <span className={`w-2 h-2 mt-1.5 rounded-full shrink-0 ${priorityDot}`} />}
             <h3 className="font-medium text-[15px] text-text">{notif.title}</h3>
           </div>
           {notif.body && (
@@ -209,7 +216,7 @@ function NotificationCard({ notif }: { notif: Notification }) {
             </p>
           )}
         </div>
-        <div className="flex items-center gap-2 text-[12px] shrink-0">
+        <div className="flex flex-wrap items-center gap-2 text-[12px] shrink-0 order-0 sm:order-none">
           {(notif.redelivery_count ?? 0) > 0 && (
             <span
               className="flex items-center gap-1 px-2 py-0.5 rounded-full border bg-sky-400/10 text-hue-blue border-sky-400/20"
@@ -516,7 +523,7 @@ export function NotificationsPage() {
         }
       />
 
-      <div className="flex-1 overflow-y-auto p-6">
+      <div className="flex-1 overflow-y-auto p-4 md:p-6">
         {showSilences && <SilencesPanel />}
         {loading ? (
           <div className="text-text-faint text-center py-10">Loading...</div>
diff --git a/web/src/pages/PlansPage.tsx b/web/src/pages/PlansPage.tsx
index 11fa6607..942f6260 100644
--- a/web/src/pages/PlansPage.tsx
+++ b/web/src/pages/PlansPage.tsx
@@ -83,7 +83,7 @@ export function PlansPage() {
         ))}
       />
 
-      <div className="flex-1 overflow-y-auto p-6">
+      <div className="flex-1 overflow-y-auto p-4 md:p-6">
         {loading ? (
           <div className="text-text-faint text-center py-10">Loading...</div>
         ) : plans.length === 0 ? (
diff --git a/web/src/pages/TasksPage.tsx b/web/src/pages/TasksPage.tsx
index 646ebf80..e3447e6d 100644
--- a/web/src/pages/TasksPage.tsx
+++ b/web/src/pages/TasksPage.tsx
@@ -229,7 +229,7 @@ export function TasksPage() {
         // and no max-width — filling the viewport is the whole point.
         <TaskBoard onOpenTask={openTask} />
       ) : (
-      <div className="flex-1 overflow-y-auto p-6">
+      <div className="flex-1 overflow-y-auto p-4 md:p-6">
         {loading ? (
           <div className="text-text-faint text-center py-10">Loading...</div>
         ) : tasks.length === 0 ? (