From 30c2b6cc1ed94acc12d3dca7033cb8ed2dbeb2bf Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Tue, 24 Feb 2026 17:17:45 +0100
Subject: [PATCH] fix: display evolution indicators inline (flex-row) next to
 emoji instead of below

---
 src/components/weather/WeatherCard.tsx | 32 +++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/weather/WeatherCard.tsx b/src/components/weather/WeatherCard.tsx
index 2b30012..c90cb44 100644
--- a/src/components/weather/WeatherCard.tsx
+++ b/src/components/weather/WeatherCard.tsx
@@ -145,20 +145,20 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       {/* Performance */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="flex flex-col items-center gap-1">
+          <div className="flex items-center justify-center gap-1">
             <Select
               value={performanceEmoji || ''}
               onChange={(e) => handleEmojiChange('performance', e.target.value || null)}
               options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
               size="sm"
-              wrapperClassName="!w-fit mx-auto"
+              wrapperClassName="!w-fit"
               className="!w-16 min-w-16 text-center text-lg py-2.5"
             />
             <EvolutionIndicator current={performanceEmoji} previous={previousEntry?.performanceEmoji ?? null} />
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-1">
-            <div className="text-2xl text-center">{performanceEmoji || '-'}</div>
+          <div className="flex items-center justify-center gap-1">
+            <span className="text-2xl">{performanceEmoji || '-'}</span>
             <EvolutionIndicator current={performanceEmoji} previous={previousEntry?.performanceEmoji ?? null} />
           </div>
         )}
@@ -167,20 +167,20 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       {/* Moral */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="flex flex-col items-center gap-1">
+          <div className="flex items-center justify-center gap-1">
             <Select
               value={moralEmoji || ''}
               onChange={(e) => handleEmojiChange('moral', e.target.value || null)}
               options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
               size="sm"
-              wrapperClassName="!w-fit mx-auto"
+              wrapperClassName="!w-fit"
               className="!w-16 min-w-16 text-center text-lg py-2.5"
             />
             <EvolutionIndicator current={moralEmoji} previous={previousEntry?.moralEmoji ?? null} />
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-1">
-            <div className="text-2xl text-center">{moralEmoji || '-'}</div>
+          <div className="flex items-center justify-center gap-1">
+            <span className="text-2xl">{moralEmoji || '-'}</span>
             <EvolutionIndicator current={moralEmoji} previous={previousEntry?.moralEmoji ?? null} />
           </div>
         )}
@@ -189,20 +189,20 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       {/* Flux */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="flex flex-col items-center gap-1">
+          <div className="flex items-center justify-center gap-1">
             <Select
               value={fluxEmoji || ''}
               onChange={(e) => handleEmojiChange('flux', e.target.value || null)}
               options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
               size="sm"
-              wrapperClassName="!w-fit mx-auto"
+              wrapperClassName="!w-fit"
               className="!w-16 min-w-16 text-center text-lg py-2.5"
             />
             <EvolutionIndicator current={fluxEmoji} previous={previousEntry?.fluxEmoji ?? null} />
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-1">
-            <div className="text-2xl text-center">{fluxEmoji || '-'}</div>
+          <div className="flex items-center justify-center gap-1">
+            <span className="text-2xl">{fluxEmoji || '-'}</span>
             <EvolutionIndicator current={fluxEmoji} previous={previousEntry?.fluxEmoji ?? null} />
           </div>
         )}
@@ -211,20 +211,20 @@ export function WeatherCard({ sessionId, currentUserId, entry, canEdit, previous
       {/* Création de valeur */}
       <td className="w-24 px-2 py-3">
         {canEditThis ? (
-          <div className="flex flex-col items-center gap-1">
+          <div className="flex items-center justify-center gap-1">
             <Select
               value={valueCreationEmoji || ''}
               onChange={(e) => handleEmojiChange('valueCreation', e.target.value || null)}
               options={WEATHER_EMOJIS.map(({ emoji }) => ({ value: emoji, label: emoji }))}
               size="sm"
-              wrapperClassName="!w-fit mx-auto"
+              wrapperClassName="!w-fit"
               className="!w-16 min-w-16 text-center text-lg py-2.5"
             />
             <EvolutionIndicator current={valueCreationEmoji} previous={previousEntry?.valueCreationEmoji ?? null} />
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-1">
-            <div className="text-2xl text-center">{valueCreationEmoji || '-'}</div>
+          <div className="flex items-center justify-center gap-1">
+            <span className="text-2xl">{valueCreationEmoji || '-'}</span>
             <EvolutionIndicator current={valueCreationEmoji} previous={previousEntry?.valueCreationEmoji ?? null} />
           </div>
         )}