Mobile fontend fix

[KAMEVETRICS]

Fixed changes

• frontend/components/Navbar.tsx
• frontend/components/CreateBetModal.tsx
• frontend/components/AccountPanel.tsx

While building on the boileplate, I noticed the following bugs (on mobile view) navbar that prevented easy onbaording for users

• No option for wallet connect
• Double Logo(s)

what i fixed

• Wallet connect option
• Removed double logos
• retained ceate bet with a "+" Icon

These changes will improve developer and user experience alike

Summary by CodeRabbit

• Style
  • Enhanced responsive button design with improved padding and mobile-optimized labels for Connect Wallet and Create Bet; labels hide on small screens, show on desktop.
  • Adjusted icon spacing for better visual alignment across screen sizes.
  • Simplified navbar logo presentation for a cleaner header appearance.

[coderabbitai]

📝 Walkthrough

Walkthrough

Three frontend components receive responsive UI refinements: button labels and icons now adapt visibility based on screen size, padding is adjusted for consistent spacing, and logo rendering logic is simplified by removing conditional branching. Business logic and component exports remain unchanged.

Changes

Cohort / File(s)	Summary
Button & Label Responsive Adjustments frontend/components/AccountPanel.tsx, frontend/components/CreateBetModal.tsx	Connect Wallet and Create Bet button labels wrapped in responsive spans (hidden on small screens, visible on md+). Button padding increased with responsive variants, and icon margins adjusted. CreateBetModal option buttons' className expressions refactored from multi-line conditionals to inline ternaries with no behavioral change.
Logo Rendering Simplification frontend/components/Navbar.tsx	Left logo area simplified by removing conditional rendering of LogoMark and desktop-specific text label. Logo now renders unconditionally, reducing conditional branching without affecting layout or functionality.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Buttons dress in responsive attire,
Padding adjusted, icons retire,
Labels that vanish on screens too small,
The logo stands tall, replacing them all! 🎨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Title check	❓ Inconclusive	The title 'Mobile fontend fix' is vague and generic, using non-descriptive language that doesn't clearly convey what specific mobile frontend issues were addressed.	Consider a more specific title that describes the main changes, such as 'Improve mobile navbar layout with responsive buttons and single logo' or 'Add wallet connect and fix mobile navbar UI issues'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/components/Navbar.tsx (1)

7-7: ⚠️ Potential issue | 🟡 Minor

LogoMark is still imported but no longer used.

The LogoMark import is now dead code since the JSX was simplified to only use Logo.

Proposed fix

-import { Logo, LogoMark } from "./Logo";
+import { Logo } from "./Logo";