Scripture undertitles (# ... #) are clipped with an ellipsis on the output

[josephomills]

Before submitting

• I searched existing open and closed issues.
• I reproduced this on the latest available version.

Describe the bug

The JSON Bible "undertitle" marker (# Text #) is used for Psalm superscriptions in NIV, NLT and CSB bibles (e.g. "A psalm of David. When he fled from his son Absalom.") and for section headings in others. json-bible renders it as an <h4>, and FreeShow's global stylesheet gives every h1–h6 white-space: nowrap; overflow: hidden; text-overflow: ellipsis (public/global.css, the h1, h2, h3, h4, h5, h6 rule). That rule reaches the output textbox, so any title longer than one line is cut off with "…" instead of wrapping. The same block-level <h4> also pushes the verse number onto its own line in the scripture drawer's verse list, so a verse with a title takes three rows.

Steps to reproduce

1. Use a bible whose Psalm titles are undertitles (NIV, NLT, CSB, or any JSON bible with ¶# title # ¶text in Psalm verse 1).
2. Drawer → Scripture → Psalm 30:1 or Psalm 18:1 → send to output with the default Scripture template.
3. Output: the title ends in "…" (KJV Psalm 30:1 shows "A Psalm and Song at the dedica…"). Drawer list: number, title and text on three separate rows.

Expected behavior

The title wraps onto further lines like the verse text does (keeping the heading colour and weight is fine). In the drawer verse list the whole verse should stay on one row, with the title truncated with an ellipsis after a fixed share of the row (a third or so) so the verse text itself remains visible.

Screenshots, logs, or files

1. Output, Psalm 30:1 (AMP), title clipped with an ellipsis.

2. Same verse with the <h4> carrying white-space:normal;overflow:visible;text-overflow:clip inline: the title wraps and the layout is otherwise identical, which shows styling alone fixes the wrapping. Drawer verse list showing the three-row layout.

Operating System

macOS

FreeShow version

1.6.5

Additional context

Suggested fix, a one-line replacement plus CSS:

1. json-bible emits the title as <h4>, and the global h1–h6 rule is what clips it. Swap the element for an inline span in src/common/scripture/sanitizeVerseText.ts, which every verse already passes through for both the drawer and the output:

const UNDERTITLE_REGEX = /<h4>(.*?)<\/h4>/g
// ...
const withUndertitles = text.replace(UNDERTITLE_REGEX, '<span class="undertitle">$1</span>')

2. Style it where verses are rendered:

/* src/frontend/components/slide/TextboxLines.svelte, next to the span.uncertain rule (output) */
.break :global(span.undertitle) {
    display: block;
    color: var(--secondary);
    font-weight: 600;
}

/* src/frontend/components/drawer/bible/Scripture.svelte, next to the .main span.verse rule (verse list) */
.main span.verse :global(span.undertitle) {
    display: inline-block;
    max-width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--secondary);
    font-weight: 600;
}

On the output the title keeps its own line (display: block is now a deliberate choice) and wraps like the rest of the text because the heading rule no longer applies. In the verse list it truncates after about a third of the row and the verse text follows on the same line. The current look is preserved: same colour, same weight. I'll open a PR with this change.

Suggestion only, on top of that: treat undertitles the way "Red Jesus words" is treated. Add one "Titles" control to the scripture settings, shown only when the loaded bible contains undertitles (the Jesus-words toggle already appears only when the bible contains !{ }!): a switch plus a colour picker, defaulting to the theme's secondary colour so nothing changes for existing users. The chosen colour applies to span.undertitle in both the drawer verse list and the output.