Feature Request: Make UI Responsive for Mobile Screens

The current Todo List UI is designed primarily for desktop use, which makes it difficult to navigate on smaller devices. The interface overflows horizontally and certain elements (like buttons and input fields) are not optimized for touch interaction. Making the UI fully responsive will improve accessibility and usability across all screen sizes.

### 🎯 Proposed Solution
- Implement responsive design using **Tailwind CSS breakpoints** or **media queries**.
- Ensure proper scaling for text, buttons, and form elements on mobile and tablet screens.
- Adjust layout so that:
- Header, input form, and todo list stack vertically on narrow screens.
- No horizontal scrolling occurs.
- Buttons and input fields are easily tappable.
- Test and optimize layout for common breakpoints:
- ≤480px (mobile)
- 481–768px (tablet)
- ≥769px (desktop)

### ✅ Expected Behavior
- App layout adapts automatically to different device widths.
- All interactions remain smooth and intuitive on touch devices.
- No content overlaps or extends off-screen on mobile.
- Consistent design and spacing across screen sizes.

### 🧪 Test Steps
1. Run the frontend using `cd App && npm run dev`.
2. Open DevTools → Device Toolbar → simulate mobile sizes (e.g., iPhone SE, Pixel 7).
3. Verify that layout, spacing, and usability remain intact.