fix(list): tooltip wrap title

2 files changed, 73 insertions, 75 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 5f2281cf..2ee10f4b 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -179,55 +179,53 @@
 									<MediaTitle title={anime.title} />
 								</span>
 							</a>
-							{#if $settings.displaySocialButton}
-								[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
-							{/if}
-							{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
-								<span class="opaque">|</span>
-							{/if}
-							{#if !upcoming || notYetReleased}
-								<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-								{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-								<button
-									class={`button-square button-action ${
-										pendingUpdate === anime.id ? 'opaque' : ''
-									}`}
-									style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-									on:click={() => {
-										if (pendingUpdate !== anime.id) {
-											lastUpdatedMedia = anime.id;
-											pendingUpdate = anime.id;
-
-											incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
-												const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
-
-												if (mediaListEntry) mediaListEntry.progress = progress + 1;
-
-												previousAnimeList = media;
-												animeLists = cleanCache(user, $identity);
-												pendingUpdate = null;
-											});
-										}
-									}}>+</button
-								>
-								{#if !completed}
-									[{anime.nextAiringEpisode?.episode === -1
-										? '?'
-										: (anime.nextAiringEpisode?.episode || 1) -
-										  ((anime.nextAiringEpisode?.airingAt || 999) <
-										  (anime.nextAiringEpisode?.nativeAiringAt || 0)
-												? 2
-												: 1)}]
-									<span class:countdown={$settings.displayCountdownRightAligned}>
-										<AiringTime originalAnime={anime} {subsPlease} />
-									</span>
-								{/if}
-							{:else}
+						</Tooltip>
+						{#if $settings.displaySocialButton}
+							[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
+						{/if}
+						{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
+							<span class="opaque">|</span>
+						{/if}
+						{#if !upcoming || notYetReleased}
+							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+							<button
+								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+								on:click={() => {
+									if (pendingUpdate !== anime.id) {
+										lastUpdatedMedia = anime.id;
+										pendingUpdate = anime.id;
+
+										incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
+											const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+
+											if (mediaListEntry) mediaListEntry.progress = progress + 1;
+
+											previousAnimeList = media;
+											animeLists = cleanCache(user, $identity);
+											pendingUpdate = null;
+										});
+									}
+								}}>+</button
+							>
+							{#if !completed}
+								[{anime.nextAiringEpisode?.episode === -1
+									? '?'
+									: (anime.nextAiringEpisode?.episode || 1) -
+									  ((anime.nextAiringEpisode?.airingAt || 999) <
+									  (anime.nextAiringEpisode?.nativeAiringAt || 0)
+											? 2
+											: 1)}]
 								<span class:countdown={$settings.displayCountdownRightAligned}>
-									<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
+									<AiringTime originalAnime={anime} {subsPlease} />
 								</span>
 							{/if}
-						</Tooltip>
+						{:else}
+							<span class:countdown={$settings.displayCountdownRightAligned}>
+								<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
+							</span>
+						{/if}
 					</span>
 				</li>
 			{/if}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index c465ff0a..c2c781f6 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -188,36 +188,36 @@
 								<MediaTitle title={manga.title} />
 							</span>
 						</a>
-						{#if $settings.displaySocialButton}
-							[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
-						{/if}
-						<span class="opaque">|</span>
-						{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-							<span class="opaque">/{manga.chapters || '?'}</span>
-						{/if}
-						<button
-							class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-							style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-							on:click={() =>
-								pendingUpdate === manga.id
-									? null
-									: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
-						>
-							+
-						</button>
-						{#if due || Math.floor(manga.episodes) < manga.chapters}
-							[{manga.episodes || '?'}]
-							{#await volumeCount(manga) then volumes}
-								{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
-
-								{#if volumes !== null && (volumeProgress || 0) < volumes}
-									<span style="color: lightcoral;">
-										Vol. {volumeProgress} &#8594; {volumes}
-									</span>
-								{/if}
-							{/await}
-						{/if}
 					</Tooltip>
+					{#if $settings.displaySocialButton}
+						[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
+					{/if}
+					<span class="opaque">|</span>
+					{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+						<span class="opaque">/{manga.chapters || '?'}</span>
+					{/if}
+					<button
+						class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+						style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+						on:click={() =>
+							pendingUpdate === manga.id
+								? null
+								: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+					>
+						+
+					</button>
+					{#if due || Math.floor(manga.episodes) < manga.chapters}
+						[{manga.episodes || '?'}]
+						{#await volumeCount(manga) then volumes}
+							{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+
+							{#if volumes !== null && (volumeProgress || 0) < volumes}
+								<span style="color: lightcoral;">
+									Vol. {volumeProgress} &#8594; {volumes}
+								</span>
+							{/if}
+						{/await}
+					{/if}
 				</li>
 			{/if}
 		{/each}