Skip to content

Framework selection cards overflow on small screens #2889

@soufiane-amt

Description

@soufiane-amt

👟 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:
#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?

  • I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions