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

@@ -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;

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>
               )
             }
           >