style: enhance emoji rendering in TaskCard

- Updated emoji display in TaskCard to use a specific font family for better visual consistency.
- Added `font-emoji` class and inline styles to ensure proper rendering of emojis across different platforms.
This commit is contained in:
Julien Froidefond
2025-09-15 09:18:40 +02:00
parent 1b97323279
commit 20e53f69ea

View File

@@ -110,7 +110,14 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
{emojis.length > 0 && (
<div className="flex gap-1 flex-shrink-0">
{emojis.slice(0, 1).map((emoji, index) => (
<span key={index} className="text-sm opacity-80">
<span
key={index}
className="text-sm opacity-80 font-emoji"
style={{
fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
fontVariantEmoji: 'normal'
}}
>
{emoji}
</span>
))}
@@ -183,7 +190,14 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
{emojis.length > 0 && (
<div className="flex gap-1 flex-shrink-0">
{emojis.slice(0, 2).map((emoji, index) => (
<span key={index} className="text-sm opacity-80">
<span
key={index}
className="text-sm opacity-80 font-emoji"
style={{
fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
fontVariantEmoji: 'normal'
}}
>
{emoji}
</span>
))}