From bf963ee3fd64929e7f99e2355678211a127cb4b9 Mon Sep 17 00:00:00 2001
From: whidix <theodor.vallier@whidix.dev>
Date: Mon, 2 Mar 2026 20:54:48 +0100
Subject: [PATCH] feat: update GuessHistoryTable styles for improved layout and
 readability

---
 src/lib/components/GuessHistoryTable.svelte | 104 ++++++++++----------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/lib/components/GuessHistoryTable.svelte b/src/lib/components/GuessHistoryTable.svelte
index fa0ac31..e20db1b 100644
--- a/src/lib/components/GuessHistoryTable.svelte
+++ b/src/lib/components/GuessHistoryTable.svelte
@@ -17,62 +17,62 @@
 			<div class="overflow-x-auto pb-2 -mx-6 px-6 sm:mx-0 sm:px-0">
 				<div class="w-max min-w-max mx-auto">
 					<!-- Header -->
-					<div class="flex gap-2 mb-2">
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Personnage</p>
+					<div class="flex gap-1 sm:gap-2 mb-2">
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+								<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Personnage</p>
 						</div>
 						{#if columnVisibility.status !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Statut</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Statut</p>
 						</div>
 						{/if}
 						{#if columnVisibility.gender !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Genre</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Genre</p>
 						</div>
 						{/if}
 						{#if columnVisibility.affiliations !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Affiliations</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Affiliations</p>
 						</div>
 						{/if}
 						{#if columnVisibility.devilFruitType !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Fruit</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Fruit</p>
 						</div>
 						{/if}
 						{#if columnVisibility.haki !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Haki</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Haki</p>
 						</div>
 						{/if}
 						{#if columnVisibility.bounty !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Prime</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Prime</p>
 						</div>
 						{/if}
 						{#if columnVisibility.height !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Taille</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Taille</p>
 						</div>
 						{/if}
 						{#if columnVisibility.origin !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Origine</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Origine</p>
 						</div>
 						{/if}
 						{#if columnVisibility.arc !== false}
-						<div class="w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-2 text-center flex items-center justify-center">
-							<p class="text-xs font-semibold uppercase tracking-wider text-amber-100">Arc</p>
+						<div class="w-16 sm:w-20 md:w-24 shrink-0 rounded-lg border border-amber-200/30 bg-amber-900/30 p-1 sm:p-2 text-center flex items-center justify-center">
+							<p class="text-[9px] sm:text-xs font-semibold uppercase tracking-wider text-amber-100">Arc</p>
 						</div>
 						{/if}
 					</div>
 
 					<!-- Rows -->
 					{#each selectedCharacters as character (character.id)}
-						<div class="flex gap-2 mb-2">
+						<div class="flex gap-1 sm:gap-2 mb-2">
 							<!-- Personnage -->
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 bg-slate-950/60 overflow-hidden">
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 bg-slate-950/60 overflow-hidden">
 								{#if character.pictureUrl}
 								<a
 									href={"https://onepiece.fandom.com/fr/wiki/" + character.url}
@@ -87,16 +87,16 @@
 									/>
 								</a>
 								{:else} 
-									<div class="w-full h-full bg-slate-800 flex items-center justify-center p-2">
-										<span class="text-xl text-center font-semibold line-clamp-3">{character.name}</span>
+									<div class="w-full h-full bg-slate-800 flex items-center justify-center p-1 sm:p-2">
+										<span class="text-xs sm:text-sm md:text-xl text-center font-semibold line-clamp-3">{character.name}</span>
 									</div>
 								{/if}
 							</div>
 
 							<!-- Vivant / Mort -->
 							{#if columnVisibility.status !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.status === dailyCharacter.status ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
-								<p class="text-sm font-bold text-white text-center">
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.status === dailyCharacter.status ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">
 									{character.status === 'Alive' ? 'Vivant' : character.status === 'Deceased' || character.status === 'Dead' ? 'Mort' : character.status || 'Inconnu'}
 								</p>
 							</div>
@@ -104,8 +104,8 @@
 
 							<!-- Genre -->
 							{#if columnVisibility.gender !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.gender === dailyCharacter.gender ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
-								<p class="text-base font-bold text-white text-center">
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.gender === dailyCharacter.gender ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+								<p class="text-xs sm:text-sm md:text-base font-bold text-white text-center">
 									{character.gender === 'Male' ? 'Homme' : character.gender === 'Female' ? 'Femme' : character.gender || 'Inconnu'}
 								</p>
 							</div>
@@ -113,7 +113,7 @@
 
 							<!-- Affiliations -->
 							{#if columnVisibility.affiliations !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {(() => {
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {(() => {
 								try {
 									const charAff = typeof character.affiliations === 'string' 
 										? ((character.affiliations as string).includes('[') ? JSON.parse(character.affiliations) : (character.affiliations as string).split(',').map((a: string) => a.trim()))
@@ -127,36 +127,36 @@
 								} catch (e) {
 									return 'bg-slate-950/60';
 								}
-							})()} p-2 flex items-center justify-center overflow-hidden">
+							})()} p-1 sm:p-2 flex items-center justify-center overflow-hidden">
 								{#if character.affiliations}
 									{@const parsedAffiliations = typeof character.affiliations === 'string' 
 										? (character.affiliations.includes('[') ? JSON.parse(character.affiliations) : character.affiliations.split(',').map((a: string) => a.trim()))
 										: character.affiliations}
 									{#if Array.isArray(parsedAffiliations) && parsedAffiliations.length > 0}
-										<p class="w-full text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations[0]}</p>
+										<p class="w-full text-[10px] sm:text-xs md:text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations[0]}</p>
 									{:else}
-										<p class="w-full text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations}</p>
+										<p class="w-full text-[10px] sm:text-xs md:text-sm font-bold text-white text-center whitespace-normal break-words leading-tight">{parsedAffiliations}</p>
 									{/if}
 								{:else}
-									<p class="text-base font-bold text-slate-400 text-center">-</p>
+									<p class="text-xs sm:text-sm md:text-base font-bold text-slate-400 text-center">-</p>
 								{/if}
 							</div>
 							{/if}
 
 							<!-- Fruit -->
 							{#if columnVisibility.devilFruitType !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.devilFruitType === dailyCharacter.devilFruitType ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.devilFruitType === dailyCharacter.devilFruitType ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
 							{#if character.devilFruitType}
-								<p class="text-sm font-bold text-white text-center">{character.devilFruitType}</p>
+								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">{character.devilFruitType}</p>
 							{:else}
-								<p class="text-5xl font-bold text-white text-center">✕</p>
+								<p class="text-2xl sm:text-3xl md:text-5xl font-bold text-white text-center">✕</p>
 							{/if}
 							</div>
 							{/if}
 
 							<!-- Haki -->
 							{#if columnVisibility.haki !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {(() => {
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {(() => {
 								if (character.hakiObservation === dailyCharacter.hakiObservation && character.hakiArmament === dailyCharacter.hakiArmament && character.hakiConqueror === dailyCharacter.hakiConqueror) {
 									return 'bg-emerald-600/90';
 								} else if ((character.hakiObservation && dailyCharacter.hakiObservation) ||
@@ -166,13 +166,13 @@
 								} else {
 									return 'bg-red-900/60';
 								}
-							})()} p-2 flex items-center justify-center">
-							<p class="text-2xl font-bold text-white text-center">
+							})()} p-1 sm:p-2 flex items-center justify-center">
+							<p class="text-sm sm:text-lg md:text-2xl font-bold text-white text-center">
 								{#if character.hakiObservation}<span title="Haki de l'Observation">👁️</span>{/if}
 								{#if character.hakiArmament}<span title="Haki de l'Armement">🦾</span>{/if}
 								{#if character.hakiConqueror}<span title="Haki des Rois">👑</span>{/if}
 								{#if !character.hakiObservation && !character.hakiArmament && !character.hakiConqueror}
-									<span class="text-5xl">✕</span>
+									<span class="text-2xl sm:text-3xl md:text-5xl">✕</span>
 								{/if}
 							</p>
 							</div>
@@ -180,7 +180,7 @@
 
 							<!-- Prime -->
 							{#if columnVisibility.bounty !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.bounty === dailyCharacter.bounty ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center relative overflow-hidden">
+							<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.bounty === dailyCharacter.bounty ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center relative overflow-hidden">
 								{#if character.bounty != null && dailyCharacter.bounty != null && character.bounty !== dailyCharacter.bounty}
 								<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
 									background-color: rgb(203, 213, 225);
@@ -190,16 +190,16 @@
 								"></div>
 								{/if}
 								{#if character.bounty != null}
-								<p class="text-sm font-bold text-white text-center relative z-10">{formatBounty(character.bounty)} ฿</p>
+								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{formatBounty(character.bounty)} ฿</p>
 								{:else}
-									<p class="text-sm font-bold text-white text-center relative z-10">Inconnue</p>
+									<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">Inconnue</p>
 								{/if}
 							</div>
 							{/if}
 
 							<!-- Taille -->
 							{#if columnVisibility.height !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.height === dailyCharacter.height ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center relative overflow-hidden">
+								<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.height === dailyCharacter.height ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center relative overflow-hidden">
 								{#if character.height && dailyCharacter.height && character.height !== dailyCharacter.height}
 									<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
 										background-color: rgb(203, 213, 225);
@@ -209,23 +209,23 @@
 									"></div>
 								{/if}
 								{#if character.height}
-									<p class="text-sm font-bold text-white text-center relative z-10">{character.height} m</p>
-								{:else}
-									<p class="text-sm font-bold text-white text-center relative z-10">Inconnue</p>
+										<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{character.height} m</p>
+									{:else}
+										<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">Inconnue</p>
 								{/if}
 							</div>
 							{/if}
 
 							<!-- Origine -->
 							{#if columnVisibility.origin !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.origin === dailyCharacter.origin ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center">
-								<p class="text-sm font-bold text-white text-center">{character.origin || 'Inconnue'}</p>
+								<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.origin === dailyCharacter.origin ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center">
+									<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center">{character.origin || 'Inconnue'}</p>
 							</div>
 							{/if}
 
 							<!-- Arc -->
 							{#if columnVisibility.arc !== false}
-							<div class="w-24 h-24 shrink-0 rounded-lg border border-white/10 {character.arcName === dailyCharacter.arcName ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-2 flex items-center justify-center relative overflow-hidden">
+								<div class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 shrink-0 rounded-lg border border-white/10 {character.arcName === dailyCharacter.arcName ? 'bg-emerald-600/90' : 'bg-red-900/60'} p-1 sm:p-2 flex items-center justify-center relative overflow-hidden">
 								{#if character.arcName !== dailyCharacter.arcName && character.firstAppearance && dailyCharacter.firstAppearance && character.firstAppearance !== dailyCharacter.firstAppearance}
 								<div class="absolute w-full h-full opacity-30 pointer-events-none" style="
 									background-color: rgb(203, 213, 225);
@@ -234,7 +234,7 @@
 										: 'polygon(97% 40%,80% 40%,80% 95%,20% 95%,20% 40%,3% 40%,50% 5%)'};
 								"></div>
 								{/if}
-								<p class="text-sm font-bold text-white text-center relative z-10">{character.arcName || 'Inconnu'}</p>
+								<p class="text-[10px] sm:text-xs md:text-sm font-bold text-white text-center relative z-10">{character.arcName || 'Inconnu'}</p>
 							</div>
 							{/if}
 						</div>