fix: add safe-area-inset-bottom to StatusBar for iOS home indicator

[YA-shiKa]

📝 Description

What type of PR is this?

• 🐛 Bug fix

What does this PR do?
Fixes the bottom status bar overlapping with the iOS home indicator gesture area. Imports isMobile from src/platform/index.js and conditionally applies the existing safe-area-inset-bottom CSS class (already defined in src/styles/globals.css) to the StatusBar's root container when running on a mobile platform.

Related issue(s):
Fixes #312

🧪 Testing

How was this tested?

• Manual testing performed

Test scenarios covered:

• Ran the full unit test suite (npm run test) : all 5 existing StatusBar tests pass
• Verified desktop behavior is unchanged: isMobile() returns false on desktop, so the safe-area-inset-bottom class is not applied and the layout is identical to before
• Verified the app builds and runs correctly via npm run tauri dev on Windows only (not tested on macOS/Linux)

📸 Screenshots/Videos

No visual change on desktop (verified via Tauri dev build on Windows). Behavior is conditional and only applies on iOS via isMobile().

📋 Checklist

• I have read the Contributing Guidelines
• My code follows the project's style guidelines
• I have performed a self-review of my code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes

For bug fixes:

• I have verified the fix works in different scenarios
• I have considered edge cases

🔄 Breaking Changes

• This PR is backwards compatible

📝 Additional Notes

This is a minimal, targeted fix as scoped in the original issue, no changes were needed to platform/index.js or globals.css, since isMobile() and the .safe-area-inset-bottom class already existed and just weren't wired together in StatusBar.jsx.

🏷️ Release Notes

User-facing changes:
On iOS, the status bar no longer overlaps with the home indicator gesture area.

Developer-facing changes:
None.