From 60cf5d1019bd1914cfd15aff83584507a2d878f7 Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Thu, 19 Mar 2026 21:11:11 +0000
Subject: [PATCH] feat(ui): Hide text-heavy elements for small mobile

---
 src/client/components/ActivityTimeline.tsx    | 65 +++++++++++--------
 src/client/components/PlayData.tsx            |  6 +-
 .../components/ScrobbleActionResult.tsx       |  4 +-
 src/client/components/TransformSteps.tsx      |  4 +-
 4 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index ff17bf05..258118bc 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, useState } from "react"
-import { Accordion, Timeline, Icon, Span, Stack, Heading, Card, Box } from '@chakra-ui/react';
+import { Accordion, Timeline, Icon, Span, Stack, Heading, Card, Box, Tabs } from '@chakra-ui/react';
 import { ErrorLike, JsonPlayObject, PlayActivity } from "../../core/Atomic";
 import { PlayData } from "./PlayData";
 import { ErrorAlert } from "./ErrorAlert";
@@ -63,28 +63,26 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
                 </Timeline.Connector>
                 <Timeline.Content>
                     <Timeline.Title>
-                        Discovered <Span color="fg.muted">new activity from</Span>
+                        Discovered <Span color="fg.muted">new (Play) activity from</Span>
                         <Span fontWeight="medium">{capitalize(source)}</Span>
                         <Span color="fg.muted">at {shortTodayAwareFormat(dayjs(playDate))}</Span>
                     </Timeline.Title>
-                    <ChakraCodeBlockShort code={input} />
-                </Timeline.Content>
-            </Timeline.Item>
-
-            <Timeline.Item>
-                <Timeline.Connector>
-                    <Timeline.Separator />
-                    <Timeline.Indicator>
-                        <Icon fontSize="xs">
-                            <IoMusicalNoteOutline />
-                        </Icon>
-                    </Timeline.Indicator>
-                </Timeline.Connector>
-                <Timeline.Content>
-                    <Timeline.Title>
-                        <Span color="fg.muted">Created new</Span> Play
-                    </Timeline.Title>
-                    <PlayData play={original} />
+                    <Card.Root bgColor="bg.muted" size="sm" hideBelow="sm">
+                        <Card.Body textStyle="sm">
+                            <Tabs.Root size="sm" variant="outline" defaultValue="play">
+                                <Tabs.List>
+                                    <Tabs.Trigger value="play">Play</Tabs.Trigger>
+                                    <Tabs.Trigger value="source">Source Data</Tabs.Trigger>
+                                </Tabs.List>
+                                <Tabs.Content value="play">
+                                    <PlayData play={original} />
+                                </Tabs.Content>
+                                <Tabs.Content value="source">
+                                    <ChakraCodeBlockShort code={input} />
+                                </Tabs.Content>
+                            </Tabs.Root>
+                        </Card.Body>
+                    </Card.Root>
                 </Timeline.Content>
             </Timeline.Item>
             {steps.length > 0 ? (
@@ -99,9 +97,13 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
                     </Timeline.Connector>
                     <Timeline.Content gap="4">
                         <Timeline.Title>
-                            Transforms
+                            Transformed Play <Span color="fg.muted">using configured Rules</Span>
                         </Timeline.Title>
-                        <TransformSteps steps={steps} original={original} collapsibleOpen={collapsibleOpen}/>
+                        <Card.Root bgColor="bg.muted" size="sm">
+                            <Card.Body textStyle="sm">
+                                <TransformSteps steps={steps} original={original} collapsibleOpen={collapsibleOpen} />
+                            </Card.Body>
+                        </Card.Root>
                     </Timeline.Content>
                 </Timeline.Item>
             ) : null}
@@ -117,12 +119,15 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
                     </Timeline.Connector>
                     <Timeline.Content gap="4">
                         <Timeline.Title>
-                            Duplicate Match Check
+                            <Span color="fg.muted">Found </Span>{match.match ? <Span color="orange.solid"> a duplicate Scrobble</Span> : 'no duplicate Scrobbles'}
                         </Timeline.Title>
-                        {match.reason}
-                        <MSCollapsible indicator="Show Details" defaultOpen={collapsibleOpen}>
-                            <ScrobbleMatchResult match={match}/>
-                        </MSCollapsible>
+                        <Card.Root bgColor="bg.muted" size="sm" hideBelow="sm">
+                            <Card.Body textStyle="sm">
+                                <MSCollapsible indicator="Show Details" defaultOpen={collapsibleOpen}>
+                                    <ScrobbleMatchResult match={match} />
+                                </MSCollapsible>
+                            </Card.Body>
+                        </Card.Root>
                     </Timeline.Content>
                 </Timeline.Item>
             ) : null}
@@ -140,7 +145,11 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
                         <Timeline.Title>
                             <Span color="fg.muted">Attmpted to</Span> Scrobble
                         </Timeline.Title>
-                        <ScrobbleActionResult result={scrobble} scrobbler="Koito" collapsibleOpen={collapsibleOpen}/>
+                        <Card.Root bgColor="bg.muted" size="sm">
+                            <Card.Body textStyle="sm">
+                                <ScrobbleActionResult result={scrobble} scrobbler="Koito" collapsibleOpen={collapsibleOpen} />
+                            </Card.Body>
+                        </Card.Root>
                     </Timeline.Content>
                 </Timeline.Item>
             ) : null}
diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index 6346a4aa..6b6d765c 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -61,15 +61,15 @@ export const PlayData = (props?: PlayInfoProps) => {
 
     if (!comparable) {
         return (<Box position="relative">
-            <Float placement="top-end" offsetX="3" hideBelow="sm" zIndex={100}>{code}</Float>
+            <Float placement="top-end" offsetX="4" offsetY="2" hideBelow="sm" zIndex={100}>{code}</Float>
             {codeMode ? <ChakraCodeBlock code={play} /> : <PlayDataDataList play={play} dates={dates} />}
         </Box>);
     }
 
     return (
         <Box position="relative">
-            <Float placement="top-end" offsetX="3" offsetY="2" hideBelow="sm" zIndex={100}>{code}</Float>
-            <Tabs.Root  defaultValue={compareDefault}>
+            <Float placement="top-end" offsetX="4" offsetY="2" hideBelow="sm" zIndex={100}>{code}</Float>
+            <Tabs.Root size="sm" variant="outline" defaultValue={compareDefault}>
                 <Tabs.List>
                     <Tabs.Trigger value="Initial">Initial</Tabs.Trigger>
                     <Tabs.Trigger value="Final">Final</Tabs.Trigger>
diff --git a/src/client/components/ScrobbleActionResult.tsx b/src/client/components/ScrobbleActionResult.tsx
index f5b2f833..51889312 100644
--- a/src/client/components/ScrobbleActionResult.tsx
+++ b/src/client/components/ScrobbleActionResult.tsx
@@ -47,7 +47,7 @@ export const ScrobbleActionResult = (props: ScrobbleActionResultProps) => {
                     <Timeline.Title>
                         <Span color="fg.muted">Sent</Span> Scrobble Payload{scrobbler !== undefined ? <Fragment><Span color="fg.muted">to</Span> {capitalize(scrobbler)}</Fragment> : null}
                     </Timeline.Title>
-                    <MSCollapsible indicator="Show Payload" defaultOpen={collapsibleOpen}>
+                    <MSCollapsible indicator="Show Payload" defaultOpen={collapsibleOpen} hideBelow="sm">
                         <ChakraCodeBlockShort code={payload} language="json" maxLines={20} />
                     </MSCollapsible>
                 </Timeline.Content>
@@ -66,7 +66,7 @@ export const ScrobbleActionResult = (props: ScrobbleActionResultProps) => {
                         <Timeline.Title>
                             <Span color="fg.muted">Received</Span> Response{scrobbler !== undefined ? <Fragment><Span color="fg.muted">from</Span> {capitalize(scrobbler)}</Fragment> : null}{warnings.length > 0 ? <Span color="orange.solid"> with warnings</Span> : null}
                         </Timeline.Title>
-                        <MSCollapsible indicator="Show Response" defaultOpen={collapsibleOpen}>
+                        <MSCollapsible indicator="Show Response" defaultOpen={collapsibleOpen} hideBelow="sm">
                         <ChakraCodeBlockShort code={response} language="json" maxLines={20} />
                         {warnings.length > 0 ? (
                             <Alert.Root status="warning">
diff --git a/src/client/components/TransformSteps.tsx b/src/client/components/TransformSteps.tsx
index a663083b..c913e2aa 100644
--- a/src/client/components/TransformSteps.tsx
+++ b/src/client/components/TransformSteps.tsx
@@ -50,7 +50,7 @@ export const TransformSteps = (props: LifeycleStepsTimelineProps) => {
                         <Timeline.Title>
                             {x.name} <Span color="fg.muted">with</Span> {x.source}
                         </Timeline.Title>
-                        <MSCollapsible indicator="Show Details" defaultOpen={collapsibleOpen}>
+                        <MSCollapsible indicator="Show Details" defaultOpen={collapsibleOpen} hideBelow="sm">
                             <Heading size="sm">Diff</Heading>
                             {err !== undefined ? <ErrorAlert error={err} /> : null}
 
@@ -70,7 +70,7 @@ export const TransformSteps = (props: LifeycleStepsTimelineProps) => {
                 </Timeline.Item>
             })}
             {currentPlay !== false ? (
-                <Timeline.Item>
+                <Timeline.Item hideBelow="sm">
                     <Timeline.Connector>
                         <Timeline.Separator />
                         <Timeline.Indicator>
-- 
2.51.2