diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index a54563855c..7c6e6df8b0 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -147,10 +147,10 @@ export function PageHero({
         {icon}
       </Box>
       <Box as="h2" direction="Column" gap="200" alignItems="Center">
-        <Text align="Center" size="H2">
+        <Text align="Center" size="H2" className={css.PageHeroText}>
           {title}
         </Text>
-        <Text align="Center" priority="400">
+        <Text align="Center" priority="400" className={css.PageHeroText}>
           {subTitle}
         </Text>
       </Box>
diff --git a/src/app/components/page/style.css.ts b/src/app/components/page/style.css.ts
index bd14cd5839..6e3a8ada89 100644
--- a/src/app/components/page/style.css.ts
+++ b/src/app/components/page/style.css.ts
@@ -111,6 +111,13 @@ export const PageHeroSection = style([
   },
 ]);
 
+export const PageHeroText = style({
+  minWidth: 0,
+  maxWidth: '100%',
+  overflowWrap: 'anywhere',
+  wordBreak: 'break-word',
+});
+
 export const PageContentCenter = style([
   DefaultReset,
   {
diff --git a/src/app/features/lobby/LobbyHero.css.tsx b/src/app/features/lobby/LobbyHero.css.tsx
index ad7e9382b7..2d6f8d048a 100644
--- a/src/app/features/lobby/LobbyHero.css.tsx
+++ b/src/app/features/lobby/LobbyHero.css.tsx
@@ -2,10 +2,14 @@ import { style } from '@vanilla-extract/css';
 import { config } from 'folds';
 
 export const LobbyHeroTopic = style({
-  display: '-webkit-box',
-  WebkitLineClamp: 3,
-  WebkitBoxOrient: 'vertical',
+  display: 'block',
   overflow: 'hidden',
+  minWidth: 0,
+  width: '100%',
+  whiteSpace: 'normal',
+  overflowWrap: 'anywhere',
+  wordBreak: 'break-word',
+  hyphens: 'auto',
 
   ':hover': {
     cursor: 'pointer',