Contrast theme and context menu fixes for bugs raised by Danny

[lawsie]

Summary

• Fix issues with contrast theme where the demo menu and dropdown menu were displaying incorrectly
• Fix broken images with the trash can icon
• Don't allow the context bar to overlap the top of the workspace, instead put it below a block if it would overlap.

• For hat blocks, display the context menu where the jaw starts, not right at the bottom.

AI usage

Claude Sonnet 5 implemented changes, checked and planned by me.

Summary by CodeRabbit

• Bug Fixes

  • Improved SVG image compatibility across browsers.
  • Updated contrast-theme sprite handling for more reliable icon display.
  • Improved contrast-theme styling for example tabs and menus.
  • Fixed floating block toolbars appearing outside the workspace.

• Accessibility

  • Enhanced contrast-theme presentation for example tabs and interface controls.

• UI Improvements

  • Toolbars now reposition below blocks when space above is limited, with the caret oriented appropriately.

[coderabbitai]

📝 Walkthrough

Walkthrough

The change adds standard SVG href support, switches contrast sprites to PNG, updates contrast-theme styling, and adds workspace-aware floating block toolbar placement below blocks with hat-jaw positioning and upward caret styling.

Changes

UI compatibility and toolbar placement

Layer / File(s)	Summary
Workspace-aware toolbar placement ui/contextmenu.js, style.css	Toolbar positioning now checks the workspace top boundary, uses hat statement-jaw geometry when available, preserves clamping, and supports below-block placement with an upward caret.
Contrast theme and image compatibility main/themes.js, style.css	Image elements receive both href and xlink:href. Contrast sprites use PNG format. Example tabs use the background color, and obsolete menu hover overrides are removed.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant BlockToolbar
  participant positionBlockToolbar
  participant Workspace
  participant HatBlock
  participant ToolbarStyles
  BlockToolbar->>positionBlockToolbar: Request placement
  positionBlockToolbar->>Workspace: Read visible top boundary
  positionBlockToolbar->>HatBlock: Read statement-jaw position when needed
  positionBlockToolbar->>ToolbarStyles: Apply below placement and upward caret
  positionBlockToolbar-->>BlockToolbar: Return clamped position

Loading

Possibly related PRs

• flipcomputing/flock#682: Introduced the tablet floating block toolbar that this change refines.
• flipcomputing/flock#687: Added toolbar infrastructure refined here with workspace boundary handling.
• flipcomputing/flock#689: Also modified floating block toolbar positioning in ui/contextmenu.js.

Suggested reviewers: tracygardner

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main contrast-theme and context-menu fixes implemented in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@style.css`:
- Around line 1485-1488: The current selector for `[data-theme='contrast']
.example-tab` does not apply to the `dark-contrast` theme, leaving unselected
tabs with insufficient contrast. Extend the selector to also handle
`[data-theme='dark-contrast'] .example-tab` by combining both theme variants
into a single rule or creating a separate rule for the dark-contrast variant,
ensuring the color property addresses the contrast issue for both themes.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2e7b6041-1bf4-459b-81ad-96ad253ad296

📥 Commits

Reviewing files that changed from the base of the PR and between f622588 and fe8f227.

📒 Files selected for processing (3)

• main/themes.js
• style.css
• ui/contextmenu.js