From 7fbfe821095c264c6953fd4737fee8bff3b23a8a Mon Sep 17 00:00:00 2001
From: Cameron Clough <cameronjclough@gmail.com>
Date: Wed, 1 Jan 2025 12:23:10 +0000
Subject: [PATCH 1/3] statistics: fix wrapping issues

---
 src/components/DeviceStatistics.tsx               |  8 ++++----
 src/pages/dashboard/activities/DeviceActivity.tsx | 14 +++++---------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/DeviceStatistics.tsx b/src/components/DeviceStatistics.tsx
index 3632be91..193170dd 100644
--- a/src/components/DeviceStatistics.tsx
+++ b/src/components/DeviceStatistics.tsx
@@ -15,18 +15,18 @@ const DeviceStatistics: VoidComponent<DeviceStatisticsProps> = (props) => {
   const allTime = () => statistics()?.all
 
   return (
-    <div class={clsx('flex h-10 w-full gap-8', props.class)}>
-      <div class="flex flex-col justify-between">
+    <div class={clsx('flex h-10 w-full', props.class)}>
+      <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
         <span class="font-mono text-label-lg uppercase">{formatDistance(allTime()?.distance)}</span>
       </div>
 
-      <div class="flex flex-col justify-between">
+      <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Duration</span>
         <span class="font-mono text-label-lg uppercase">{formatDuration(allTime()?.minutes)}</span>
       </div>
 
-      <div class="flex flex-col justify-between">
+      <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Routes</span>
         <span class="font-mono text-label-lg uppercase">{allTime()?.routes ?? 0}</span>
       </div>
diff --git a/src/pages/dashboard/activities/DeviceActivity.tsx b/src/pages/dashboard/activities/DeviceActivity.tsx
index 81a47ec1..96cae580 100644
--- a/src/pages/dashboard/activities/DeviceActivity.tsx
+++ b/src/pages/dashboard/activities/DeviceActivity.tsx
@@ -111,15 +111,11 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
       </TopAppBar>
       <div class="flex flex-col gap-4 px-4 pb-4">
         <div class="h-min overflow-hidden rounded-lg bg-surface-container-low">
-          <div class="flex">
-            <div class="flex-auto">
-              <Suspense fallback={<div class="skeleton-loader size-full" />}>
-                <div class="p-4">
-                  <DeviceStatistics dongleId={props.dongleId} />
-                </div>
-              </Suspense>
-            </div>
-            <div class="flex p-4">
+          <div class="m-4 flex">
+            <Suspense fallback={<div class="skeleton-loader size-full" />}>
+              <DeviceStatistics dongleId={props.dongleId} />
+            </Suspense>
+            <div class="flex items-center">
               <IconButton onClick={() => void takeSnapshot()}>camera</IconButton>
             </div>
           </div>

From a9ade7056204ffe3aff20051badc2a8697a6e80d Mon Sep 17 00:00:00 2001
From: Cameron Clough <cameronjclough@gmail.com>
Date: Thu, 2 Jan 2025 14:07:27 +0000
Subject: [PATCH 2/3] routelist: only show engagement % on larger screens

---
 src/components/RouteStatistics.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx
index 5e0ca456..c3b9ccd1 100644
--- a/src/components/RouteStatistics.tsx
+++ b/src/components/RouteStatistics.tsx
@@ -26,24 +26,24 @@ const RouteStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
 
   return (
     <div class={clsx('flex size-full items-stretch gap-8', props.class)}>
-      <div class="flex flex-col justify-between">
+      <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
         <span class="font-mono text-label-lg uppercase">{formatRouteDistance(props.route)}</span>
       </div>
 
-      <div class="flex flex-col justify-between">
+      <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Duration</span>
         <span class="font-mono text-label-lg uppercase">{formatRouteDuration(props.route)}</span>
       </div>
 
-      <div class="flex flex-col justify-between">
+      <div class="hidden grow flex-col justify-between xs:flex">
         <span class="text-body-sm text-on-surface-variant">Engaged</span>
         <Suspense>
           <span class="font-mono text-label-lg uppercase">{formatEngagement(timeline())}</span>
         </Suspense>
       </div>
 
-      <div class="flex flex-col justify-between">
+      <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">User flags</span>
         <Suspense>
           <span class="font-mono text-label-lg uppercase">{formatUserFlags(timeline())}</span>

From 1cf7731b1622cc8aec387566354b4180de9accc5 Mon Sep 17 00:00:00 2001
From: Cameron Clough <cameronjclough@gmail.com>
Date: Thu, 2 Jan 2025 14:13:16 +0000
Subject: [PATCH 3/3] update tailwind breakpoint for xs

---
 tailwind.config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 26599fb7..30d8ad69 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -197,7 +197,8 @@ export default {
         },
       },
       screens: {
-        xs: '425px',
+        // Larger screen phones (iPhone Pro/Max, Galaxy Ultra, Pixel XL/Pro...)
+        xs: '411px',
       },
       animation: {
         indeterminate1: 'indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',