Configurable tab width for commit page

Changes

7 changed files (+88/-0)

• static/global.css
  • @@ -290,6 +290,19 @@ font-size: var(--font-md);
    margin-block-end: var(--space-xl); } + .tab-selector { + display: flex; + flex-direction: column; + gap: var(--space-md); + } + + .tab-selector--select { + font-size: var(--font-md); + margin: 0; + padding: var(--space-xxs) var(--space-sm); + max-width: 4em; + } + /* Sticky header and aside */ @media (min-height: 50rem) { .header {
• static/noscript.css (new)
  • @@ -0,0 +1,8 @@
    + /* Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: MIT + */ + + .noscript--feature-unavailable { + font-size: var(--font-sm); + font-weight: var(--font-thick); + }
• static/repo-commit.css
  • @@ -131,5 +131,6 @@ color: var(--color-fg-subtle);
    } .repo-commit--diff-line-text { + display: inline-block; white-space: pre; }
• static/tab-selector.js (new)
  • @@ -0,0 +1,38 @@
    + // Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + // SPDX-License-Identifier: MIT + + const LOCAL_STORAGE_KEY = "legit_tab_width"; + + function isValidTabWidth(width) { + if (typeof width !== "string") { + return false; + } + + const n = parseInt(width, 10); + + return Number.isFinite(n) && n > 0; + } + + function applyTabWidth(width) { + localStorage.setItem(LOCAL_STORAGE_KEY, width); + document.body.style.tabSize = width; + } + + const selector = document.getElementById("global_tab_width"); + if (selector) { + const saved = localStorage.getItem(LOCAL_STORAGE_KEY); + const value = isValidTabWidth(saved) ? saved : "4"; + + selector.value = value; + applyTabWidth(value); + + selector.addEventListener("change", event => { + if (!isValidTabWidth(event.currentTarget.value)) { + return; + } + + applyTabWidth(event.currentTarget.value); + }); + + selector.disabled = false; + }
• templates/head.html.tmpl
  • @@ -15,4 +15,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="/static/favicon.png" type="image/png" /> <link rel="stylesheet" href="/static/colors.css" /> <link rel="stylesheet" href="/static/global.css" /> + <noscript> + <link rel="stylesheet" href="/static/noscript.css" /> + </noscript> {{- end }}
• templates/repo-commit.html.tmpl
  • @@ -147,6 +147,7 @@ {{- slice .Parent.Hash.String 0 8 -}}
    </a> </dd> {{ end -}} + {{- template "tab-selector" -}} </dl> </div> </main>
• templates/tab-selector.html.tmpl (new)
  • @@ -0,0 +1,24 @@
    + <!-- + Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + SPDX-License-Identifier: MIT + --> + {{ define "tab-selector" -}} + <dt class="metadata--key">Tab width</dt> + <dd class="metadata--value tab-selector"> + <script type="module" src="/static/tab-selector.js"></script> + <select id="global_tab_width" class="tab-selector--select" disabled> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + <option value="4" selected>4</option> + <option value="6">6</option> + <option value="8">8</option> + <option value="12">12</option> + </select> + <noscript> + <span class="noscript--feature-unavailable"> + Changing tab width requires JavaScript enabled. + </span> + </noscript> + </dd> + {{- end -}}