From 8a43cc6e2f1e5b58e2c7a40b5b08c206d2bc40a4 Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Sun, 19 Apr 2026 12:51:49 +0300
Subject: [PATCH] feat(mobile): tiered columns on the broadcasts table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every column rendered at every width, relying on horizontal scroll.
A 375px phone had to swipe sideways just to read a name. Matches
the tiering contacts already uses:

- Mobile (<sm): Name + Status only.
- sm+: adds Recipients, Date.
- md+: adds Template.
- lg+: adds Delivery + Read rate bars.

Desktop (≥lg) unchanged — all seven columns visible as before.

Salvaged from the closed PR #52 — the OG-image portion of that PR
is already on main via PR #55, so only the broadcasts-table change
is shipped here.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/(dashboard)/broadcasts/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/(dashboard)/broadcasts/page.tsx b/src/app/(dashboard)/broadcasts/page.tsx
index 2140ca1..33c6126 100644
--- a/src/app/(dashboard)/broadcasts/page.tsx
+++ b/src/app/(dashboard)/broadcasts/page.tsx
@@ -211,14 +211,14 @@ export default function BroadcastsPage() {
             <TableHeader>
               <TableRow className="border-slate-800 hover:bg-transparent">
                 <TableHead className="text-slate-400">Name</TableHead>
-                <TableHead className="text-slate-400">Template</TableHead>
-                <TableHead className="text-slate-400 text-right">
+                <TableHead className="hidden text-slate-400 md:table-cell">Template</TableHead>
+                <TableHead className="hidden text-right text-slate-400 sm:table-cell">
                   Recipients
                 </TableHead>
-                <TableHead className="text-slate-400">Delivery</TableHead>
-                <TableHead className="text-slate-400">Read</TableHead>
+                <TableHead className="hidden text-slate-400 lg:table-cell">Delivery</TableHead>
+                <TableHead className="hidden text-slate-400 lg:table-cell">Read</TableHead>
                 <TableHead className="text-slate-400">Status</TableHead>
-                <TableHead className="text-slate-400">Date</TableHead>
+                <TableHead className="hidden text-slate-400 sm:table-cell">Date</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -233,20 +233,20 @@ export default function BroadcastsPage() {
                     <TableCell className="font-medium text-white">
                       {broadcast.name}
                     </TableCell>
-                    <TableCell className="text-slate-300">
+                    <TableCell className="hidden text-slate-300 md:table-cell">
                       {broadcast.template_name}
                     </TableCell>
-                    <TableCell className="text-right text-slate-300 tabular-nums">
+                    <TableCell className="hidden text-right text-slate-300 tabular-nums sm:table-cell">
                       {broadcast.total_recipients}
                     </TableCell>
-                    <TableCell>
+                    <TableCell className="hidden lg:table-cell">
                       <RateCell
                         value={broadcast.delivered_count}
                         total={broadcast.total_recipients}
                         color="bg-emerald-500"
                       />
                     </TableCell>
-                    <TableCell>
+                    <TableCell className="hidden lg:table-cell">
                       <RateCell
                         value={broadcast.read_count}
                         total={broadcast.total_recipients}
@@ -266,7 +266,7 @@ export default function BroadcastsPage() {
                         {status.label}
                       </span>
                     </TableCell>
-                    <TableCell className="text-slate-400">
+                    <TableCell className="hidden text-slate-400 sm:table-cell">
                       {new Date(broadcast.created_at).toLocaleDateString()}
                     </TableCell>
                   </TableRow>