From cbe8074df8a2e2c5d66192e996ea0d0f714b68d6 Mon Sep 17 00:00:00 2001
From: Simon <simon@sgruber.at>
Date: Fri, 6 Nov 2026 14:14:40 +0100
Subject: [PATCH] Rank chip with primary tint; more breathing room around the
 phone stats button

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/frontend/src/styles.css                |  7 ++++---
 src/frontend/src/views/ParticipantView.tsx | 11 +++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/styles.css b/src/frontend/src/styles.css
index 8f1c737..5752f9e 100644
--- a/src/frontend/src/styles.css
+++ b/src/frontend/src/styles.css
@@ -201,9 +201,9 @@
 .live-banner.closed > .anticon:first-child { animation: none; }
 .live-fab-wrap {
   position: fixed;
-  right: 12px;
-  bottom: calc(12px + env(safe-area-inset-bottom));
-  left: 12px;
+  right: 16px;
+  bottom: calc(16px + env(safe-area-inset-bottom));
+  left: 16px;
   z-index: 50;
   display: flex;
   flex-direction: column;
@@ -216,6 +216,7 @@
 .live-card-body { border-top: 0 !important; border-radius: 0 0 16px 16px !important; }
 .live-fab {
   position: relative;
+  margin: 0 6px 6px 0; /* keeps the fab and its count chip clear of the screen edge */
   width: 48px;
   height: 48px;
   border: 0;
diff --git a/src/frontend/src/views/ParticipantView.tsx b/src/frontend/src/views/ParticipantView.tsx
index 79ff404..d8cd0aa 100644
--- a/src/frontend/src/views/ParticipantView.tsx
+++ b/src/frontend/src/views/ParticipantView.tsx
@@ -9,6 +9,8 @@ import {
   Popconfirm,
   Row,
   Space,
+  Tag,
+  theme,
   Typography,
   message,
 } from "antd";
@@ -361,6 +363,7 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
     };
   }, [isClosed, orderId]);
 
+  const { token } = theme.useToken();
   const wide = useMediaQuery("(min-width: 992px)");
   const hasStats = !!stats && stats.participant_count > 0;
   const showBanner = hasStats && wide;
@@ -531,9 +534,13 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
             title="Your order"
             extra={
               stats?.my_rank && (
-                <Text type="secondary" title={`You were ${["1st", "2nd", "3rd"][stats.my_rank - 1]} to order`}>
+                <Tag
+                  bordered={false}
+                  title={`You were ${["1st", "2nd", "3rd"][stats.my_rank - 1]} to order`}
+                  style={{ margin: 0, borderRadius: 8, padding: "2px 10px", background: token.colorPrimaryBgHover, color: token.colorPrimary, fontWeight: 600 }}
+                >
                   {["🥇", "🥈", "🥉"][stats.my_rank - 1]} #{["1st", "2nd", "3rd"][stats.my_rank - 1]}
-                </Text>
+                </Tag>
               )
             }
           >