From 37621c271f1694d01704bc510e9ddad4791e8b27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksander=20Wilczy=C5=84ski?= <aleks@alekswilc.dev>
Date: Tue, 22 Apr 2025 11:44:39 +0200
Subject: [PATCH] fix(): add word-break to activity to prevent responsive
 issues

---
 src/components/Whoami.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Whoami.tsx b/src/components/Whoami.tsx
index 76aeba6..0332884 100644
--- a/src/components/Whoami.tsx
+++ b/src/components/Whoami.tsx
@@ -18,7 +18,7 @@ const Activity = ({ data }: { data: TActivity }) => {
             <div className="flex flex-col justify-center pr-4">
                 <VscodeWhoamiIcon />
             </div>
-            <div className="flex flex-col justify-center">
+            <div className="flex flex-col justify-center break-all">
                 <h1 className='text-lg font-light'>{data.name}</h1>
                 {data.state && <p className='text-sm font-light text-zinc-300'>{data.state}</p>}
                 {data.details && <p className='text-sm font-light text-zinc-300'>{data.details}</p>}
@@ -29,7 +29,7 @@ const Activity = ({ data }: { data: TActivity }) => {
         <div className="flex flex-col justify-center pr-4">
             <GameWhoamiIcon />
         </div>
-        <div className="flex flex-col justify-center">
+        <div className="flex flex-col justify-center break-all">
             <h1 className='text-lg font-light'>{data.name}</h1>
             {data.state && <p className='text-sm font-light text-zinc-300'>{data.state}</p>}
             {data.details && <p className='text-sm font-light text-zinc-300'>{data.details}</p>}
@@ -87,7 +87,7 @@ export const Whoami = () => {
                         <div className="flex flex-col justify-center pr-4">
                             <SpotifyWhoamiIcon />
                         </div>
-                        <div className="flex flex-col justify-center">
+                        <div className="flex flex-col justify-center break-all">
                             <h1 className='text-lg font-light'>{t("landing.discord.listening")}</h1>
                             <p className='text-sm font-light text-zinc-300'>{t("landing.discord.song", { song: data.spotify.song, artist: data.spotify.artist })}</p>
                         </div>