diff --git a/src/app/components/page/style.css.ts b/src/app/components/page/style.css.ts
index bd14cd583..b106320f3 100644
--- a/src/app/components/page/style.css.ts
+++ b/src/app/components/page/style.css.ts
@@ -111,6 +111,7 @@ export const PageHeroSection = style([
   },
 ]);
 
+
 export const PageContentCenter = style([
   DefaultReset,
   {
diff --git a/src/app/features/lobby/LobbyHero.css.tsx b/src/app/features/lobby/LobbyHero.css.tsx
index ad7e9382b..3349213a2 100644
--- a/src/app/features/lobby/LobbyHero.css.tsx
+++ b/src/app/features/lobby/LobbyHero.css.tsx
@@ -6,6 +6,7 @@ export const LobbyHeroTopic = style({
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical',
   overflow: 'hidden',
+  wordBreak: 'break-word',
 
   ':hover': {
     cursor: 'pointer',