fix: 画面の横幅が小さいときのページ内の画像とコードブロックのスタイルを改善 (#137)

Author: 3w36zj6

website/bun.lockb

@@ -17,6 +17,7 @@
 		"@tailwindcss/vite": "^4.1.5",
 		"@types/bun": "latest",
 		"hono": "^4.6.13",
+		"tailwind-merge": "^3.3.0",
 		"tailwindcss": "^4.1.5",
 		"vite": "^6.2.5"
 	}

website/package.json

@@ -1,4 +1,5 @@
 import type { FC } from "hono/jsx";
+import { twMerge } from "tailwind-merge";
 
 export type HtmlContentProps = {
 	html: string;
@@ -7,7 +8,21 @@ export type HtmlContentProps = {
 export const HtmlContent: FC<HtmlContentProps> = ({ html }) => {
 	return (
 		<div
-			class="[&_img]:mx-auto [&_img]:block [&_img]:max-w-full"
+			class={twMerge([
+				"overflow-hidden",
+				"[&_img]:mx-auto",
+				"[&_img]:block",
+				"[&_img]:max-w-full",
+				"[&_img]:h-auto",
+				"[&_img]:object-contain",
+				"[&_img]:w-auto",
+				"[&_pre]:overflow-x-auto",
+				"[&_pre]:max-w-full",
+				"[&_pre]:whitespace-pre-wrap",
+				"[&_pre]:break-all",
+				"[&_pre_code]:block",
+				"[&_pre_code]:w-full",
+			])}
 			// biome-ignore lint/security/noDangerouslySetInnerHtml: typst-docsで生成されたHTMLを表示する
 			dangerouslySetInnerHTML={{ __html: html }}
 		/>