fix: hide bookings opt-in banner on mobile viewport

[PeerRich]

What does this PR do?

Hides the "Try the new bookings page" opt-in banner on mobile viewports (< 768px) by adding hidden md:block Tailwind classes to the banner container.

The banner is a fixed-position popup in the bottom-right corner of /bookings which takes up significant screen space on mobile devices.

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
• I confirm automated tests are in place that prove my fix is effective or that my feature works. N/A — CSS-only visibility change.

How should this be tested?

1. Navigate to /bookings on a desktop viewport — the opt-in banner should still appear in the bottom-right corner
2. Resize the browser below 768px (or use mobile device emulation) — the banner should not be visible
3. Verify the banner's "Try it" button and dismiss functionality still work on desktop

Human Review Checklist

• Confirm md (768px) is the desired mobile breakpoint — adjust to sm (640px) or lg (1024px) if a different threshold is preferred
• Note: the banner hook/state logic still runs on mobile; only CSS visibility is toggled. This is an acceptable tradeoff for a one-line fix.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[cubic-dev-ai]

No issues found across 1 file

[dhairyashiil]

working 👍🏼

Screen.Recording.2026-02-15.at.7.52.35.PM.mov