From b00cde2a6e45b36b1c8da547ebb92496a959bac6 Mon Sep 17 00:00:00 2001
From: Simon Gruber <Simon.Gruber@copadata.com>
Date: Tue, 5 May 2026 20:07:08 +0200
Subject: [PATCH] UI adjustments

---
 .../src/components/views/HomeOrdersTable.tsx  | 54 ++++++++++++-------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/components/views/HomeOrdersTable.tsx b/src/frontend/src/components/views/HomeOrdersTable.tsx
index bf643b9..00cd64d 100644
--- a/src/frontend/src/components/views/HomeOrdersTable.tsx
+++ b/src/frontend/src/components/views/HomeOrdersTable.tsx
@@ -92,36 +92,52 @@ export default function HomeOrdersTable({
             const isClosed = !!item.closed;
             const closedStr = isClosed ? " Closed" : "Open";
 
-            const dateStr =
-              item.created_at
-                ? new Date(item.created_at).toLocaleString()
-                : "Unknown creation time";
+            const dateStr = item.created_at
+              ? new Date(item.created_at).toLocaleString()
+              : "Unknown creation time";
 
             return (
               <Space size={16}>
-                <Icon path={mdiFood} size={1} style={getOrderIconStyle(isClosed)} />
+                <Icon
+                  path={mdiFood}
+                  size={1}
+                  style={getOrderIconStyle(isClosed)}
+                />
                 <Space direction="vertical" size={0}>
                   <Space size={8} align="center">
                     <Text strong>{item.title || item.id}</Text>
-                    {item.is_owner ? <Tag color="geekblue">Owner</Tag> : null}
-                    {item.is_owner && item.has_unpaid_submissions ? (
-                      <Tag color="volcano">Open payments</Tag>
-                    ) : null}
-                    {state === "paid" ? <Tag color="green">Paid</Tag> : null}
-                    {state === "unpaid" ? (
-                      <Tag color="volcano">Unpaid</Tag>
-                    ) : null}
-                    {state === "pending" ? <Tag color="blue">Pending</Tag> : null}
+                    <Space size={0} align="center">
+                      {item.is_owner ? <Tag color="geekblue">Owner</Tag> : null}
+                      {item.is_owner && item.has_unpaid_submissions ? (
+                        <Tag color="volcano">Open payments</Tag>
+                      ) : null}
+                      {state === "paid" ? <Tag color="green">Paid</Tag> : null}
+                      {state === "unpaid" ? (
+                        <Tag color="volcano">Unpaid</Tag>
+                      ) : null}
+                      {state === "pending" ? (
+                        <Tag color="blue">Pending</Tag>
+                      ) : null}
+                    </Space>
                   </Space>
                   <Text type="secondary">
-                    {<Tooltip title={`Order is ${closedStr.toLocaleLowerCase()}`}>{closedStr}</Tooltip>}{" • "}
-                    {<Tooltip title={`Created at: ${dateStr}`}>{dateStr}</Tooltip>}
+                    {
+                      <Tooltip
+                        title={`Order is ${closedStr.toLocaleLowerCase()}`}
+                      >
+                        {closedStr}
+                      </Tooltip>
+                    }
+                    {" • "}
+                    {
+                      <Tooltip title={`Created at: ${dateStr}`}>
+                        {dateStr}
+                      </Tooltip>
+                    }
                     {item.is_participant && formatted && (
                       <>
                         {" • "}
-                        <Tooltip title="Your order">
-                          {formatted}
-                        </Tooltip>
+                        <Tooltip title="Your order">{formatted}</Tooltip>
                       </>
                     )}
                   </Text>