Skip to content

Display puzzle title on puzzle page outside the pause modal - #580

Closed
Abdellox wants to merge 2 commits into
crosshare-org:masterfrom
Abdellox:fix/display-puzzle-title-573
Closed

Display puzzle title on puzzle page outside the pause modal#580
Abdellox wants to merge 2 commits into
crosshare-org:masterfrom
Abdellox:fix/display-puzzle-title-573

Conversation

@Abdellox

@Abdellox Abdellox commented Sep 6, 2026

Copy link
Copy Markdown

Fixes #573

The puzzle title was only visible inside the pause/begin overlay, making it invisible while solving. This matters for puzzles where the title is a hint (e.g. 'Distant Lands').

Changes

  • Added a puzzleTitle bar below the TopBar showing puzzle.title while the puzzle is active or solved
  • Uses white-space:nowrap + text-overflow:ellipsis to truncate long titles without multiline wrapping (as suggested in the issue)
  • Hidden when the pause overlay is open (title is already shown there)
  • Hidden in Slate embed mode (SlateHeader already handles that case)

Fixes crosshare-org#573

The puzzle title was only visible inside the pause/begin overlay, not
on the active puzzle page itself. This is a problem for puzzles where
the title is a hint (e.g. 'Distant Lands').

Added a title bar below the TopBar that:
- Shows the puzzle title when the puzzle is active (timer running or solved)
- Is hidden when the pause/begin overlay is showing (redundant there)
- Is hidden in Slate (embed) mode, where SlateHeader already shows the title
- Truncates long titles with text-overflow: ellipsis to avoid multiline wrapping
@mdirolf

mdirolf commented Sep 6, 2026

Copy link
Copy Markdown
Member

Thanks for contributing! Can you post some screenshots of how this looks at different breakpoints?

My strong inclination is to avoid adding a separate bar - especially on mobile where vertical space is often so constrained.

Avoids adding an extra bar below the TopBar which takes mobile
vertical space. The title is now rendered inside the existing
header row using the built-in embedTitle styling (ellipsis
truncation, flex-grow, hidden on narrow screens via media query).

The TopBar already receives title as a prop (used in embed mode);
adding a showTitle boolean lets the puzzle page opt into the same
inline display when the puzzle is actively being solved.

Changes:
- TopBar: add showTitle prop; render title inside headerInner
  using embedTitle class when showTitle && !isEmbed && !isSlate
- Puzzle: pass showTitle instead of rendering a separate div
- Puzzle.module.scss: remove the standalone .puzzleTitle class
@Abdellox

Abdellox commented Sep 8, 2026

Copy link
Copy Markdown
Author

Thanks for the feedback, @mdirolf! I've reworked the implementation to avoid adding a separate bar. Instead of a new row below the TopBar, the title is now rendered inside the existing header row using the built-in embedTitle styling that was already used for the embed case. This means:

  • No extra vertical space -- the title sits in the same row as the logo and toolbar controls
  • Ellipsis truncation -- long titles are handled with text-overflow: ellipsis (same as embed mode)
  • Hidden on mobile -- the embedTitle class already has a media query that hides it on narrow screens, so vertical space is preserved where it matters most

Regarding screenshots -- I don't have a running instance set up to capture them right now, but the change reuses the existing embed behavior (visible on desktop, hidden on narrow screens). You can preview by checking the updated diff.

Happy to adjust further if you have a different placement in mind.

@Abdellox Abdellox closed this Sep 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Display the title on the puzzle page outside of the pause modal

2 participants