appwrite / appwrite/console

Framework selection cards overflow on small screens

Open
#2,889 1 comment 0 reactions 0 assignees View on GitHub
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

Image

Image

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.