🎨 FEAT: Responsive Memory Layout & UI Polishing

[idna001]

📱 Issue: Responsive UI Polishing & Multi-Device Support

📝 Description

Currently, the Memory game has several layout inconsistencies on mobile devices, specifically regarding spacing and alignment. To provide a professional user experience, we need to transition from a desktop-first approach to a fully responsive design that explicitly supports Mobile, Tablet, and Desktop frames.

🎯 Scope of Work

• Mobile Fixes: Resolve current spacing bugs (incorrect margins/padding) and fix display errors where elements overlap or overflow.
• Tablet Frame: Introduce a dedicated layout for tablet-sized screens (e.g., iPads/Android Tablets) to ensure the grid doesn't look "stretched" or too small.
• Memory Grid Scaling: Ensure the card grid adjusts its column count or sizing based on the screen width.
• History UI: Make the recently added History component more compact on smaller screens.

🛠️ Requirements & Breakpoints

The UI should be tested and optimized for:

• Mobile (< 640px): Single-column UI, compact header, optimized card sizes.
• Tablet (640px - 1024px): Adjusted grid layout and balanced white space.
• Desktop (> 1024px): Full-scale experience with all features visible.

---

📸 Submission Criteria (For the PR)

Important

To ensure visual consistency, the Pull Request must include screenshots or screen recordings of the following views:

1. Mobile View (Portrait & Landscape)
2. Tablet View
3. Desktop View

Labels: bug, enhancement, ui-ux