Fix ruby text wrapping in variant vocabulary entries

[GJRobert]

Summary

修正主表四縣／饒平地區變體行在 Chrome 系 ruby 毋會換行、長標音爆出 td、摎撐闊頁面个問題。

Key Changes

• .vocab-variants、.variant 加 max-width: 100%，限制 flex 容器寬度
• .variant ruby 加 min-width: 0（ruby 係 .variant（flex）个直接子元素，會被 blockify，min-width 有效），讓 ruby 做得縮細摎換行
• .variant-hidden-base（phonetic-only 變體个隱藏 base）个 font-size 從 0 改 1px：Chrome ruby 个換行點係 base 提供个，base 寬度 0 就無斷點，長 rt 會一行到底；仍維持 visibility: hidden、line-height: 0
• 窄螢幕（≤768px）卡片模式 #generated table, #sandhi-showcase table, #comparison-table 加 table-layout: fixed：Chrome 算 blockify 後 ruby 个 min-content 係全寬，auto layout 會照最長个變體標音撐闊歸隻表格（360px 下頁寬 370、320px 下 362）；tr 已經係 block，固定佈局無副作用
• style.css 版本號 4.7.32 → 4.7.35

驗證

Chromium 實測：320／360／390px 頁寬都摎 viewport 共樣（修前 360px 為 370~375）；竹行長標音會換行；phonetic-only 長 rt 從單行 358px 變多行 244px。768px 以上版面無變化。Firefox／Safari 尚未實測（Firefox 愛看 phonetic-only 个 label 對齊）。

https://claude.ai/code/session_01JtgyEf1Y5Jswgrr7EgMCXz

[claude]

Review

改動小、方向合理（flex item 的 `min-width:auto` 導致不換行是常見成因），註解也有說明原因，`index.html` 的 `?v=` 也有 bump，符合快取慣例。

建議／疑慮

1. `min-width` 對 `ruby` 可能無效：`.variant ruby` 的 `display` 預設是 `ruby`（非 flex item 時近似 inline），`min-width` 只作用於 block／flex／grid item 等。若 ruby 是 `.variant`（`display:flex`）的直接子元素，會被 blockify 而生效；但若中間隔了其他包裝元素，這行就不起作用。請確認 DOM 結構，或在 Chrome 實測「發燒（作燒）」這類長標音，確認真正是哪一條規則讓它換行。
2. `max-width:100%` 對 `inline-flex` 的 `.vocab-variants`：百分比是相對於包含區塊（td）的寬度，若 td 為 `width:auto` 的表格自動配置，百分比可能解析循環；建議在窄螢幕（手機）與寬螢幕、表格各欄都看一次，避免欄寬被擠壓。
3. 即使 ruby 能 shrink，Chrome 的 ruby 內部 `rt` 是否能在音節間斷行仍取決於 `word-break`／`overflow-wrap`；若實測仍爆版，可能需要 `overflow-wrap:anywhere` 之類。
4. 規則可併入既有的 `.vocab-variants`／`.variant` 區塊，避免同一選擇器散在兩處（非必要）。
5. 暗色主題：此為純版面修改，無需補樣式。無自動化測試，建議在 PR 補上修正前後截圖（Chrome / Safari / Firefox）。

整體：沒有安全或效能疑慮；請確認 1、2 的實測後即可合併。

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying hakspring with    Cloudflare Pages

Latest commit:	e0d4de6
Status:	✅  Deploy successful!
Preview URL:	https://98110e54.hakspring.pages.dev
Branch Preview URL:	https://ccr-fa70a124-2hojxs.hakspring.pages.dev

View logs

[claude]

Review

整體改動細(CSS 兩檔),意圖清楚,註解也有保留風格。幾點提醒:

1. PR 描述摎實際 diff 無對著

• 描述講版本 4.7.32 → 4.7.33,但 diff 係 4.7.32 → 4.7.34。請確認愛个版本號(抑係中間有 4.7.33 已經 merge 過)。
• 描述無提到 .variant-hidden-base 个 font-size: 0 → 1px,這係實質行為變更,應該寫入 Key Changes。

2. font-size: 1px 个風險

• Chrome 有最小字體設定(部分語系/使用者設定會強制 ≥ 最小字級),1px 可能被抬高,導致隱藏 base 實際佔寬/佔高變大。因為有 visibility: hidden 且 line-height: 0,視覺影響應該有限,但建議在 Chrome、Safari、Firefox 同手機實測一擺長標音(例:發燒（作燒）)个換行摎行高。
• 隱藏 base 若有多个字,每字 1px 个斷點寬度加起來還是細,應該 OK。

3. min-width: 0 on ruby

• ruby 係 display: ruby,毋係 flex item 个話 min-width 無效果;註解講 flex item,請確認 .variant 確實係 flex/inline-flex 容器。若無,真正起作用个應該係 font-size 修改,註解就愛調整,避免誤導後人。
• .vocab-variants, .variant { max-width: 100% } 對 inline-flex 係合理个。

4. 暗色主題/其他

• 純排版修正,無涉及色彩,毋使暗色樣式。其他 .css/.js 無改,cache-bust 只愛 style.css,有處理到。
• 無自動化測試(此專案本來就無);建議在 PR 補截圖(修前/修後)當驗證證據。

無安全或效能問題。處理完第 1 點即可 merge。

[claude]

Review

CSS 修改範圍小，註解也有說明原因，並維持既有註解。我看不出明顯 bug，另有三點建議：

1. table-layout: fixed 要確認有作用：它只對 display: table（或 inline-table）的元素生效。若卡片模式已把 table 本身設成 display: block，這行就沒效果。PR 說 360px 實測從 370 降到 360，應該有生效，但 #generated table、#sandhi-showcase table、#comparison-table 三者在該媒體查詢內的 display 值建議逐一確認。
2. font-size: 1px 的 hidden base：
   • visibility: hidden 加 line-height: 0 能控制高度。
   • 但 hidden base 仍會產生 1px 寬度的字元，請確認 phonetic-only 的 rt 對齊，尤其是 Firefox（PR 也提到）和 Safari，以及選取／複製時是否會多出隱藏字。
   • 建議上線前補上這兩個瀏覽器的實測結果。
3. max-width: 100% 加在 .vocab-variants、.variant：這是全域規則，沒有包在 768px 以上的媒體查詢裡。PR 說桌面版面無變化，建議再看一下寬表格或橫向捲動情境。

其他：

• index.html 的 style.css?v= 已更新，符合快取慣例。版本從 4.7.32 跳到 4.7.35，若中間版本是其他分支佔用就沒問題。
• 這次改的是 CSS，沒動 data/，所以不必 bump data_version.json。
• 暗色主題：沒有新增 GUI 元件，不受影響。
• 沒有自動化測試，這類版面問題也很難用單元測試覆蓋。建議在 PR 附上前後截圖，方便審核。

整體來說可以合併，只要補上 Firefox／Safari 的驗證。

🤖 Generated with Claude Code

[GJRobert]

Firefox 𠊎自家驗核。👌