ewancroft.uk
+6
-4
src/lib/components/layout/main/card/BlueskyPostCard.svelte
+6
-4
src/lib/components/layout/main/card/BlueskyPostCard.svelte
···
272
272
<div
273
273
class="{isReplyParent
274
274
? 'mb-2'
275
-
: 'mb-3'} overflow-wrap-anywhere break-words whitespace-pre-wrap text-{isReplyParent
275
+
: 'mb-3'} overflow-wrap-anywhere wrap-break-word whitespace-pre-wrap text-{isReplyParent
276
276
? 'sm'
277
277
: 'base'} leading-relaxed text-ink-900 dark:text-ink-50"
278
278
>
···
361
361
{/if}
362
362
<div class="p-3">
363
363
<h3
364
-
class="overflow-wrap-anywhere mb-1 line-clamp-2 text-sm font-semibold break-words text-ink-900 dark:text-ink-50"
364
+
class="overflow-wrap-anywhere mb-1 line-clamp-2 text-sm font-semibold wrap-break-word text-ink-900 dark:text-ink-50"
365
365
>
366
366
{postData.externalLink.title}
367
367
</h3>
368
368
{#if postData.externalLink.description}
369
369
<p
370
-
class="overflow-wrap-anywhere mb-2 line-clamp-2 text-xs break-words text-ink-700 dark:text-ink-300"
370
+
class="overflow-wrap-anywhere mb-2 line-clamp-2 text-xs wrap-break-word text-ink-700 dark:text-ink-300"
371
371
>
372
372
{postData.externalLink.description}
373
373
</p>
374
374
{/if}
375
-
<p class="overflow-wrap-anywhere text-xs break-words text-ink-600 dark:text-ink-400">
375
+
<p
376
+
class="overflow-wrap-anywhere text-xs wrap-break-word text-ink-600 dark:text-ink-400"
377
+
>
376
378
{new URL(postData.externalLink.uri).hostname}
377
379
</p>
378
380
</div>
+4
-4
src/lib/components/layout/main/card/LinkCard.svelte
+4
-4
src/lib/components/layout/main/card/LinkCard.svelte
···
42
42
>
43
43
{#if variant === 'button'}
44
44
<span class="font-medium">{title}</span>
45
-
<ExternalLink class="h-4 w-4 flex-shrink-0" aria-hidden="true" />
45
+
<ExternalLink class="h-4 w-4 shrink-0" aria-hidden="true" />
46
46
{:else}
47
47
<div class="flex-1 space-y-1">
48
48
{#if emoji || (badges && badges.length > 0)}
···
75
75
{/if}
76
76
77
77
<!-- 👇 Title is always below the badges -->
78
-
<h3 class="overflow-wrap-anywhere font-semibold break-words text-ink-900 dark:text-ink-50">
78
+
<h3 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">
79
79
{title}
80
80
</h3>
81
81
82
82
{#if displayDescription}
83
83
<p
84
-
class="overflow-wrap-anywhere line-clamp-2 text-sm break-words text-ink-700 dark:text-ink-200"
84
+
class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200"
85
85
>
86
86
{displayDescription}
87
87
</p>
···
95
95
</div>
96
96
97
97
<ExternalLink
98
-
class="h-4 w-4 flex-shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
98
+
class="h-4 w-4 shrink-0 text-ink-700 transition-colors group-hover:text-primary-600 dark:text-ink-200 dark:group-hover:text-primary-400"
99
99
aria-hidden="true"
100
100
/>
101
101
{/if}
+3
-3
src/lib/components/layout/main/card/MusicStatusCard.svelte
+3
-3
src/lib/components/layout/main/card/MusicStatusCard.svelte
···
116
116
href={safeMusicStatus.originUrl || '#'}
117
117
target="_blank"
118
118
rel="noopener noreferrer"
119
-
class="block max-w-full text-lg font-semibold break-words whitespace-normal text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
119
+
class="block max-w-full text-lg font-semibold wrap-break-word whitespace-normal text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
120
120
class:pointer-events-none={!safeMusicStatus.originUrl}
121
121
class:cursor-default={!safeMusicStatus.originUrl}
122
122
class:opacity-70={!safeMusicStatus.originUrl}
···
126
126
127
127
<!-- Artists -->
128
128
<p
129
-
class="mt-1 flex max-w-full items-start gap-1.5 text-base break-words whitespace-normal text-ink-800 dark:text-ink-100"
129
+
class="mt-1 flex max-w-full items-start gap-1.5 text-base wrap-break-word whitespace-normal text-ink-800 dark:text-ink-100"
130
130
>
131
131
<Users class="mt-0.5 h-4 w-4 flex-shrink-0 text-ink-600 dark:text-ink-300" />
132
132
{formatArtists(safeMusicStatus.artists)}
···
135
135
<!-- Album + Duration -->
136
136
{#if safeMusicStatus.releaseName}
137
137
<p
138
-
class="mt-1 flex max-w-full items-start gap-1.5 text-sm break-words whitespace-normal text-ink-700 dark:text-ink-200"
138
+
class="mt-1 flex max-w-full items-start gap-1.5 text-sm wrap-break-word whitespace-normal text-ink-700 dark:text-ink-200"
139
139
>
140
140
<Album class="mt-0.5 h-4 w-4 flex-shrink-0 text-ink-500 dark:text-ink-400" />
141
141
<span>
+2
-2
src/lib/components/layout/main/card/PostCard.svelte
+2
-2
src/lib/components/layout/main/card/PostCard.svelte
···
104
104
105
105
<!-- Title -->
106
106
<h3
107
-
class="overflow-wrap-anywhere font-semibold break-words text-ink-900 dark:text-ink-50"
107
+
class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50"
108
108
>
109
109
{post.title}
110
110
</h3>
···
112
112
<!-- Description -->
113
113
{#if post.description}
114
114
<p
115
-
class="overflow-wrap-anywhere line-clamp-2 text-sm break-words text-ink-700 dark:text-ink-200"
115
+
class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200"
116
116
>
117
117
{post.description}
118
118
</p>
+1
-1
src/lib/components/layout/main/card/ProfileCard.svelte
+1
-1
src/lib/components/layout/main/card/ProfileCard.svelte
···
109
109
110
110
{#if safeProfile.description}
111
111
<p
112
-
class="overflow-wrap-anywhere wrap-break-words mb-4 whitespace-pre-wrap text-ink-700 dark:text-ink-200"
112
+
class="overflow-wrap-anywhere wrap-wrap-break-word mb-4 whitespace-pre-wrap text-ink-700 dark:text-ink-200"
113
113
>
114
114
{safeProfile.description}
115
115
</p>
+3
-1
src/lib/components/layout/main/card/TangledRepoCard.svelte
+3
-1
src/lib/components/layout/main/card/TangledRepoCard.svelte
···
41
41
aria-hidden="true"
42
42
/>
43
43
<div class="flex min-w-0 flex-1 flex-col gap-1">
44
-
<h3 class="overflow-wrap-anywhere font-semibold break-words text-ink-900 dark:text-ink-50">
44
+
<h3
45
+
class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50"
46
+
>
45
47
{repo.name}
46
48
</h3>
47
49
<div class="flex flex-wrap items-center gap-3 text-xs text-ink-700 dark:text-ink-200">
+2
-2
src/lib/components/ui/BlogPostCard.svelte
+2
-2
src/lib/components/ui/BlogPostCard.svelte
···
33
33
{/if}
34
34
35
35
<!-- Title -->
36
-
<h4 class="overflow-wrap-anywhere font-semibold break-words text-ink-900 dark:text-ink-50">
36
+
<h4 class="overflow-wrap-anywhere font-semibold wrap-break-word text-ink-900 dark:text-ink-50">
37
37
{post.title}
38
38
</h4>
39
39
40
40
<!-- Description -->
41
41
{#if post.description}
42
42
<p
43
-
class="overflow-wrap-anywhere line-clamp-2 text-sm break-words text-ink-700 dark:text-ink-200"
43
+
class="overflow-wrap-anywhere line-clamp-2 text-sm wrap-break-word text-ink-700 dark:text-ink-200"
44
44
>
45
45
{post.description}
46
46
</p>