feat: add mobile responsive layout for screens under 768px

[thephez]

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

Summary by CodeRabbit

• Style
  • Improved mobile responsiveness for screens up to 768px: refined header layout and typography, streamlined navigation and link sizing, reorganized main container and sidebar for single-column flow, adjusted result and action areas for wrapping and spacing, optimized form field and button sizing, and tuned banners and status displays for better small-screen presentation.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a mobile-responsive CSS block for screens ≤768px, modifying layout, spacing, sizing, and wrapping for header, navigation, app container, sidebar, result UI, form fields, and action buttons. (Purely presentational CSS changes.)

Changes

Cohort / File(s)

Summary

Mobile responsive styling public/index.css

Introduces an @media (max-width: 768px) block (~94 lines) that adjusts header wrapping and font sizes, normalizes version-info, reflows header-nav and links, switches app layout to column, makes sidebar full-width with visible overflow, alters result-container min-height and result-header padding/wrapping, updates result-actions/button sizing and spacing, modifies status-banner height/padding, reflows where-field-group/where-value-input/operator-select and nonce-value widths, sets field-group labels to block with width changes, and reduces execute-button padding/font-size. All changes are presentational CSS only.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately and concisely describes the main change: adding mobile responsive CSS layout for screens under 768px.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/mobile-improvements

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@public/index.css`:
- Around line 839-854: The .result-actions rule sets flex-wrap and gap but lacks
display:flex, so those properties don't apply; update the .result-actions
selector to make it a flex container (e.g., add display: flex) so gap and
flex-wrap take effect and the .result-actions button spacing behaves correctly.
- Around line 799-823: The .header h1 currently uses white-space: nowrap which
can force horizontal scrolling on narrow screens; update the .header h1 rule to
enable truncation by adding overflow handling (e.g., overflow: hidden and
text-overflow: ellipsis) and ensure it has a constrained width inside the flex
container (use max-width or allow it to shrink via flex: 1 1 auto on .header h1
or .header children) so long titles truncate with an ellipsis instead of causing
the header to overflow.