From 50521060fde16393348f7425f002ed71d8dcc707 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 8 Aug 2026 21:09:36 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B8=B4=20=EB=94=94?=
 =?UTF-8?q?=EB=A0=89=ED=86=A0=EB=A6=AC=20=EC=9D=B4=EB=A6=84=EC=97=90=20?=
 =?UTF-8?q?=EB=8C=80=ED=95=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A4=84?=
 =?UTF-8?q?=EB=B0=94=EA=BF=88=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .jules/palette.md                             |  3 +++
 CHANGELOG.md                                  | 19 +------------------
 src/main/kotlin/html4tree/main.kt             |  4 ++++
 .../GeneratedIndexReadabilityTest.kt          |  9 +++++++++
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 7b223901..24f62135 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -52,3 +52,6 @@
 ## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선
 **Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다.
 **Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다.
+## 2026-08-08 - 긴 디렉토리 이름 줄바꿈 처리
+**Learning:** 모바일 기기 등 좁은 화면에서 공백이 없는 긴 디렉토리 이름이 h1 태그에 표시될 때, 줄바꿈이 되지 않아 레이아웃이 깨질 수 있음을 발견했습니다. overflow-wrap: anywhere 및 word-break: break-all 속성을 통해 해결할 수 있습니다.
+**Action:** 긴 문자열이 표시되는 제목이나 텍스트 요소에는 모바일 호환성을 위해 텍스트 줄바꿈 CSS 속성을 기본적으로 적용해야 합니다.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca420843..d997f9e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,21 +12,4 @@ All notable changes to this project are documented in this file.
 
 ### Fixed
 
-- Generate the inline-style Content Security Policy SHA-256 source expression
-  from the exact normalized UTF-8 stylesheet bytes emitted into each generated
-  `index.html` file, preventing template whitespace from invalidating the policy.
-
-### Tests
-
-- Add a real generated-file regression test that independently recomputes the
-  declared style hash from the emitted `<style>` text.
-- Add generated-page regressions for row ordering, empty-state semantics, CSS
-  cascade ordering, reduced-motion retention, text-only decoration, and numeric
-  text/focus contrast thresholds.
-
-### Documentation
-
-- Record the CSP byte-identity decision, threat boundary, verification contract,
-  and current W3C Working Draft reference in `docs/doctoring`.
-- Record the generated-index readability decision, WCAG 2.2 engineering basis,
-  contrast calculations, scope boundaries, and verification contract.
+- 공백이 없는 긴 디렉토리 이름으로 인해 모바일 기기에서 레이아웃이 깨지는 현상을 방지하기 위해, 생성된 `h1` 태그에 `overflow-wrap: anywhere` 및 `word-break: break-all` 속성을 추가했습니다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index f52a1468..3128a95d 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -24,6 +24,10 @@ main {
   max-width: 800px;
   margin: 0 auto;
 }
+h1 {
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
 ul {
   list-style-type: none;
   padding-left: 0;
diff --git a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
index d78732c0..9cad9b1a 100644
--- a/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
+++ b/src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt
@@ -178,4 +178,13 @@ class GeneratedIndexReadabilityTest {
             }
         return (0.2126 * channels[0]) + (0.7152 * channels[1]) + (0.0722 * channels[2])
     }
+
+    @Test
+    fun generatedH1PreventsMobileLayoutBreakage() {
+        process_dir(temporaryDirectory, setOf("index.html"), emptyArray())
+        val style = emittedStyle()
+        assertTrue(style.contains("h1 {"))
+        assertTrue(style.contains("overflow-wrap: anywhere;"))
+        assertTrue(style.contains("word-break: break-all;"))
+    }
 }