From 8a182e517ca0c33da5c0163a6ae9c9470ca9d3a5 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 8 Mar 2025 14:25:12 +0900
Subject: fix style

---
 frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx          | 6 ++++--
 frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx     | 4 +++-
 .../app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx  | 4 +++-
 frontend/app/root.tsx                                               | 1 +
 frontend/app/shiki.css                                              | 3 +++
 5 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 frontend/app/shiki.css

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index d0e5a9a..7bfae6b 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -83,9 +83,11 @@ export default function GolfPlayAppGaming({
 			<div className="grow grid grid-cols-3 divide-x divide-gray-300">
 				<div className="p-4">
 					<div className="mb-2 text-xl font-bold">{problemTitle}</div>
-					<div className="p-2 grid gap-4">
+					<div className="p-2 flex flex-col gap-4">
 						<BorderedContainer>
-							<pre className="text-gray-700">{problemDescription}</pre>
+							<pre className="text-gray-700 whitespace-pre-wrap break-words">
+								{problemDescription}
+							</pre>
 						</BorderedContainer>
 						<BorderedContainer>
 							<div>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index ade565f..226e1e2 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -119,7 +119,9 @@ export default function GolfWatchAppGaming1v1({
 							{problemTitle}
 						</div>
 						<BorderedContainer>
-							<pre>{problemDescription}</pre>
+							<pre className="text-gray-700 whitespace-pre-wrap break-words">
+								{problemDescription}
+							</pre>
 						</BorderedContainer>
 					</div>
 				</div>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index f5766c0..7a36283 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -53,7 +53,9 @@ export default function GolfWatchAppGamingMultiplayer({
 							{problemTitle}
 						</div>
 						<BorderedContainer>
-							<pre>{problemDescription}</pre>
+							<pre className="text-gray-700 whitespace-pre-wrap break-words">
+								{problemDescription}
+							</pre>
 						</BorderedContainer>
 					</div>
 				</div>
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index e47d794..20aa910 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -9,6 +9,7 @@ import {
 	ScrollRestoration,
 } from "@remix-run/react";
 import "./tailwind.css";
+import "./shiki.css";
 
 config.autoAddCss = false;
 
diff --git a/frontend/app/shiki.css b/frontend/app/shiki.css
new file mode 100644
index 0000000..25647c4
--- /dev/null
+++ b/frontend/app/shiki.css
@@ -0,0 +1,3 @@
+pre.shiki {
+  white-space: pre-wrap;
+}
-- 
cgit v1.2.3-70-g09d2