Fix text overflowing the screen on phones

Author: robohase

src/assets/styles/tailwind.css

@@ -157,13 +157,16 @@
 
 /*
   Japanese line breaking: the build inserts <wbr> between phrases (integrations/budoux-wbr.ts), and
-  keep-all makes those the only break points, so lines no longer split a word. break-word still
-  wraps anything too long for its box. text-wrap: pretty avoids a lone character on the last line.
+  keep-all makes those the only break points, so lines no longer split a word. `anywhere` still
+  wraps a phrase that is longer than its box (unlike break-word it also lets flex/grid columns shrink,
+  so a long katakana phrase cannot push the page wider than a phone screen). text-wrap: pretty avoids
+  a lone character on the last line.
 */
 @layer base {
   :where(body) {
     word-break: keep-all;
     overflow-wrap: break-word;
+    overflow-wrap: anywhere;
   }
   :where(p, li, dd) {
     text-wrap: pretty;

src/components/pages/HomePage.astro

@@ -32,7 +32,7 @@ const T = {
     seekSubtitle: '作業用クローラーロボット',
     seekAlt: 'コンクリート瓦礫の上の Seek',
     seekText:
-      '過酷な環境下での活躍を目指して開発している作業マニピュレータ付きクローラーロボットです。本体を覆うメインクローラーと4本のサブクローラー、全長1.5m の6自由度アーム、5台の単眼カメラ・熱カメラ・3D LiDAR を備え、災害現場での調査やインフラ点検、危険区域での作業での活躍が期待されます。',
+      '過酷な環境下での活躍を目指して開発している作業マニピュレータ付き\u200bクローラーロボットです。本体を覆うメインクローラーと4本のサブクローラー、全長1.5m の6自由度アーム、5台の単眼カメラ・熱カメラ・3D LiDAR を備え、災害現場での調査やインフラ点検、危険区域での作業での活躍が期待されます。',
     seekMore: 'Seek について詳しく見る',
     outputsTitle: '情報発信',
     outputsSubtitle: '開発で得たノウハウやソースコードを公開しています。',

src/components/pages/RobotsPage.astro

@@ -24,7 +24,7 @@ const T = {
     title: 'ロボット',
     description:
       'NuTech-R が開発している作業用クローラーロボット「Seek」の紹介。6自由度アームと複数のカメラ・センサを備え、災害現場での調査やインフラ点検での活躍を目指しています。',
-    heroSubtitle: '過酷な環境下での活躍を目指して開発している作業マニピュレータ付きクローラーロボットです。',
+    heroSubtitle: '過酷な環境下での活躍を目指して開発している作業マニピュレータ付き\u200bクローラーロボットです。',
     overviewTitle: '機体の特徴',
     imageAlt:
       'Seek の各部（6自由度アーム、俯瞰アーム、エンドエフェクタ、Wi-Fi ルーター、3D LiDAR、メインクローラー、サブクローラー）',