From 0b8673de5241a4b84dd8a7b0c1592c9036dd6111 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Mon, 24 Aug 2026 19:46:59 +0530
Subject: [PATCH] style: right-align created date in fetch-request and report
 rows

- created_at pinned right before row actions in both lists; remaining cells wrap inside a shrinking area so the date never wraps to a left-aligned line
---
 src/FetchRequest/FetchRequestCreate.tsx | 48 ++++++++++++++++---------
 src/Reports/ReportList.tsx              |  2 +-
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/FetchRequest/FetchRequestCreate.tsx b/src/FetchRequest/FetchRequestCreate.tsx
index c2aa37c..2a944b6 100644
--- a/src/FetchRequest/FetchRequestCreate.tsx
+++ b/src/FetchRequest/FetchRequestCreate.tsx
@@ -130,22 +130,38 @@ function FetchRequestList() {
             })}
             onClick={() => navigate(`/fetch-requests/${row.id}`)}
           >
-            <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
-              {columns.map((col) => (
-                <Box key={col.name} sx={{ minWidth: 120 }}>
-                  <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
-                    {col.label}
-                  </Typography>
-                  <ListCellRenderer
-                    field={col}
-                    value={row[col.name]}
-                    displayFormat={col.fk
-                      ? (allResources.find((r) => r.name === col.fk!.resource)?.displayFormat ?? displayFormat)
-                      : displayFormat}
-                  />
-                </Box>
-              ))}
-              <Box sx={{ ml: "auto", flexShrink: 0 }}>
+            <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
+              <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center", flex: 1, minWidth: 0 }}>
+                {columns
+                  .filter((col) => col.name !== "created_at")
+                  .map((col) => (
+                    <Box key={col.name} sx={{ minWidth: 120 }}>
+                      <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+                        {col.label}
+                      </Typography>
+                      <ListCellRenderer
+                        field={col}
+                        value={row[col.name]}
+                        displayFormat={col.fk
+                          ? (allResources.find((r) => r.name === col.fk!.resource)?.displayFormat ?? displayFormat)
+                          : displayFormat}
+                      />
+                    </Box>
+                  ))}
+              </Box>
+              {(() => {
+                const dateCol = columns.find((col) => col.name === "created_at");
+                if (!dateCol) return null;
+                return (
+                  <Box sx={{ flexShrink: 0, textAlign: "right" }}>
+                    <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+                      {dateCol.label}
+                    </Typography>
+                    <ListCellRenderer field={dateCol} value={row.created_at} displayFormat={displayFormat} />
+                  </Box>
+                );
+              })()}
+              <Box sx={{ flexShrink: 0 }}>
                 <Tooltip title="Delete fetch request">
                   <IconButton
                     size="small"
diff --git a/src/Reports/ReportList.tsx b/src/Reports/ReportList.tsx
index e35710c..44751ca 100644
--- a/src/Reports/ReportList.tsx
+++ b/src/Reports/ReportList.tsx
@@ -51,7 +51,7 @@ export function ReportList({ reports, loading, fields, selectedId, onView, onReg
               "&:hover": { borderColor: "primary.light" },
             }}
           >
-            <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
+            <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
               <Box sx={{ flex: "1 1 260px", minWidth: 0 }}>
                 <Typography variant="body1" fontWeight={600} noWrap sx={{ fontSize: "0.9375rem" }}>
                   {report.name || report.id}