Framework selection cards overflow on small screens
- Dominant language
- Svelte
- Stars
- 393
- Forks
- 260
- Avg merge
- 6h 53m
- Merged PRs (30d)
- 24
Description
### 👟 Reproduction steps
## Bug reproduction :
1. Go to Personal projects
2. Click on a project
3. Scroll down and click on 'Add platform' then click on "Web"
4. Try mobile and smaller screens you will notice that cards internal content overflows
## Description
The framework selection grid in the Web platform wizard is hardcoded to:
grid-template-columns: repeat(3, 1fr);
On smaller screens this causes card content to overflow and compress excessively.
## Screenshots
## Proposed Fix
Add a responsive breakpoint to switch to 2 columns below ~900px.
I’ve submitted a PR with the proposed fix:
https://github.com/appwrite/console/pull/2890
### 👍 Expected behavior
The grid should switch to 2 columns on smaller viewports to prevent overflow and improve readability.
### 👎 Actual Behavior
The cards internal content overflows in mobile and smaller screens.
### 🎲 Appwrite version
Version 1.8.x
### 💻 Operating system
Linux
### 🧱 Your Environment
- Browser: Microsoft edge
- OS: Windows 11 with WSL2 (Ubuntu 22.04)
- Node.js: v22.15.1 via NVM
- Package manager: pnpm v10.28.2
- Network: Standard company network (with some SSL/certificate restrictions)
### 👀 Have you spent some time to check if this issue has been raised before?
- [x] I checked and didn't find similar issue
### 🏢 Have you read the Code of Conduct?
- [x] I have read the [Code of Conduct](https://github.com/appwrite/.github/blob/main/CODE_OF_CONDUCT.md)
Contributor guide
Assessment
This issue has not been assessed yet.