foxxmd.dev / multi-scrobbler
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
deezer docker jellyfin koito lastfm listenbrainz maloja mopidy mpris music music-assistant plex scrobble self-hosted spotify subsonic tautulli youtube-music
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): Fix text alignment in timeline titles

FoxxMD (Jun 30, 2026, 8:27 PM UTC) db333184 a5963a23

+15 -8
+5 -4
src/client/components/ActivityTimeline.tsx
··· 1 1 import { ComponentProps, useState, Fragment } from "react" 2 - import { Accordion, Timeline, Icon, Span, Stack, Heading, Card, Box, Tabs, Skeleton, SkeletonCircle, SkeletonText } from '@chakra-ui/react'; 2 + import { Accordion, Timeline, Icon, Span, Stack, Heading, Card, Box, Tabs, Skeleton, SkeletonCircle, SkeletonText, HTMLChakraProps } from '@chakra-ui/react'; 3 3 import { ComponentType, ErrorLike, JsonPlayObject, PlayActivity } from "../../core/Atomic"; 4 4 import { PlayData } from "./PlayData"; 5 5 import { ErrorAlert } from "./ErrorAlert"; ··· 21 21 import { Muted } from "./Typography"; 22 22 import { PlayApiCommonDetailed } from "../../core/Api"; 23 23 import { MSErrorBoundary } from "./ErrorBoundary"; 24 + import { timelineTextFormatting } from "../utils/ComponentUtils"; 24 25 25 26 26 27 export interface ActivityDetailProps { ··· 157 158 <Timeline.Content gap="4"> 158 159 <Timeline.Title> 159 160 <MSCollapsible 160 - indicator={<Span>Transformed Play <Span color="fg.muted">using configured Rules</Span></Span>} 161 + indicator={<Span {...timelineTextFormatting}>Transformed Play <Span color="fg.muted">using configured Rules</Span></Span>} 161 162 defaultOpen={collapsibleOpen} 162 163 timeline> 163 164 <Card.Root bgColor="bg.muted" size="sm"> ··· 180 181 </Timeline.Indicator> 181 182 </Timeline.Connector> 182 183 <Timeline.Content gap="4"> 183 - <Timeline.Title> 184 + <Timeline.Title {...timelineTextFormatting}> 184 185 Play <Muted>was</Muted> not transformed <Muted>because no</Muted> Transform Rules <Muted> were used/configured.</Muted> 185 186 </Timeline.Title> 186 187 </Timeline.Content> ··· 199 200 <Timeline.Content gap="4"> 200 201 <Timeline.Title> 201 202 <MSCollapsible 202 - indicator={<Span><Span color="fg.muted">Found </Span>{match.match ? <Span color="orange.solid"> a duplicate Scrobble</Span> : 'no duplicate Scrobbles'}</Span>} 203 + indicator={<Span {...timelineTextFormatting}><Span color="fg.muted">Found </Span>{match.match ? <Span color="orange.solid"> a duplicate Scrobble</Span> : 'no duplicate Scrobbles'}</Span>} 203 204 defaultOpen={collapsibleOpen} 204 205 disableUntil="md" 205 206 timeline>
+3 -2
src/client/components/TransformSteps.tsx
··· 12 12 import { MSCollapsible, MSCollapsibleExternalProps } from "./MSCollapsible"; 13 13 import { Muted } from "./Typography"; 14 14 import { JsonDiffPatch } from "./diffs/JsonDiff"; 15 + import { timelineTextFormatting } from "../utils/ComponentUtils"; 15 16 16 17 export interface LifeycleStepsTimelineProps extends MSCollapsibleExternalProps { 17 18 steps: LifecycleStep[] ··· 146 147 <Timeline.Content> 147 148 <Timeline.Title> 148 149 <MSCollapsible 149 - indicator={<Span><Span color="fg.muted">Stage </Span>{stageType}-{stageName}<Span color="fg.muted"> in Hook </Span>{hook} <Span color="fg.muted">from</Span> {source} {summary}</Span>} 150 + indicator={<Span {...timelineTextFormatting}><Span color="fg.muted">Stage </Span>{stageType}-{stageName}<Span color="fg.muted"> in Hook </Span>{hook} <Span color="fg.muted">from</Span> {source} {summary}</Span>} 150 151 defaultOpen={collapsibleOpen} 151 152 disableUntil="md" 152 153 timeline> ··· 182 183 </Timeline.Indicator> 183 184 </Timeline.Connector> 184 185 <Timeline.Content> 185 - <Timeline.Title> 186 + <Timeline.Title {...timelineTextFormatting}> 186 187 Final Play<Span color="fg.muted">after all Transforms</Span> 187 188 </Timeline.Title> 188 189 <PlayData play={original} final={finalPlay} dates={false} compareDefault="Final" />
+7 -2
src/client/utils/ComponentUtils.tsx
··· 1 - import { Card } from '@chakra-ui/react'; 1 + import { Card, HTMLChakraProps } from '@chakra-ui/react'; 2 2 3 3 export const cardHeaderSeparator: Card.HeaderProps = { 4 4 borderBottomWidth: "1px", 5 5 paddingBottom: "2" 6 - }; 6 + }; 7 + 8 + export const timelineTextFormatting: HTMLChakraProps<"span"> = { 9 + textAlign: "left", 10 + textWrap: "balance" 11 + }