Bugfix: Use mobile search on big tablets

[lawsie]

Summary

Large tablets (e.g. Samsung Galaxy A11) weren't getting the mobile version of workspace search, making it very difficult to move between results. Gate this at 768px OR up to 900px if it's touch.

Bonus extra: fixed wrong contrast text in dark mode 2 which meant search text was black on dark grey.

AI usage

Claude Sonnet 5 used throughout but the plan made by me.

Summary by CodeRabbit

• Bug Fixes

  • Improved search layouts and resizing behavior on tablets and other narrow, touch-enabled devices.
  • Ensured search animations respond consistently across supported mobile and tablet screen sizes.

• Style

  • Updated mobile search text and empty-state colors for improved readability and visual consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0e66091f-c581-4c58-b71b-1c069f0b35d1

📥 Commits

Reviewing files that changed from the base of the PR and between 77cd6d1 and d2ce69a.

📒 Files selected for processing (2)

• main/blocklyinit.js
• style/blockly.css

---

📝 Walkthrough

Walkthrough

Mobile search now uses a shared responsive query for toolbox and workspace layouts, including coarse-pointer devices up to 899px. CSS applies matching breakpoints and primary text colors to mobile search elements.

Changes

Mobile search responsive behavior

Layer / File(s)	Summary
Shared mobile query and search lifecycle main/blocklyinit.js	A shared mobile-search query controls toolbox and workspace search layouts. Search interfaces close when the query no longer matches.
Mobile search breakpoints and colors style/blockly.css	Mobile search styles and animations support coarse-pointer viewports through 899px. Search text elements use --color-text-primary.

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

Possibly related PRs

• flipcomputing/flock#654: Introduced the mobile search functionality refined by this change.
• flipcomputing/flock#658: Added related mobile-search breakpoint and styling behavior.
• flipcomputing/flock#660: Updated mobile search resize handling in main/blocklyinit.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 and concisely describes the primary change: enabling mobile search on large tablets.
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.}