fix(blabsy): use dynamic viewport height so the chat composer isn't hidden by browser UI

[Bekiboo]

Description of change

Switch the chat containers from 100vh to 100dvh (dynamic viewport height) so they track the actually-visible area. dvh equals vh when there is no browser chrome (PWA / desktop), so no regression there.

Issue Number

Closes #1023

Type of change

• Fix (a change which fixes an issue)

How the change has been tested

Verified on a real Android device (Chrome): the composer now sits above the navigation bar and stays reachable with the keyboard open.

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• Bug Fixes
  • Improved chat window display on mobile and desktop by updating viewport height calculations to better accommodate browser UI elements and ensure consistent rendering across devices.

[coderabbitai]

📝 Walkthrough

Walkthrough

All height calculations in chat.tsx are changed from 100vh to 100dvh for both mobile (selected and unselected states) and desktop layout containers. The mobile unselected container also gains flex flex-col classes.

Changes

Chat Viewport Height Fix

Layer / File(s)	Summary
Switch Chat containers from vh to dvh platforms/blabsy/client/src/components/chat/chat.tsx	Mobile selected/unselected container heights change from 100vh-6rem to 100dvh-6rem; unselected container gains flex flex-col; desktop grid wrapper and sidebar panel heights change from 100vh-4rem to 100dvh-4rem.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 The viewport was tall, but the keyboard hid below,
100vh deceived — it didn't really know.
With dvh in place, the dynamic bar's accounted,
The chat box is reachable, no longer daunted!
One small unit swap, and the messages flow~ 🌸

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: switching from 100vh to 100dvh to fix a mobile browser UI issue with the chat composer.
Linked Issues check	✅ Passed	The PR directly addresses issue #1023 by replacing 100vh with 100dvh in chat container CSS, ensuring the composer remains visible and reachable on mobile browsers.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the viewport height issue in the chat component; no unrelated modifications are present.
Description check	✅ Passed	The pull request description follows the required template structure with all necessary sections completed: issue number, type of change, testing verification, and a checked-off change checklist.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/blabsy-chat-input-unreachable-mobile

---

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.}