Skip to content

[Bug]: "HTML / CSS " Skill Pill Overflows Container #725

@ShaktiShrey-01

Description

@ShaktiShrey-01

What happened?

In the "Supports Skills Including" section, the right-most skill badge ("HTML / CSS") breaks out of its parent card container. The element overflows off the right side of the screen, indicating an issue with how the items are wrapping on smaller viewports.

I want to work on this issue under Gssoc26

Image

Steps to reproduce

1.Navigate to the landing page on a mobile device or narrow viewport.
2.Scroll down to the "Supports Skills Including:" card.
3.Observe the layout of the skill pills (Python, JavaScript, HTML / CSS).

Expected behaviour

The parent container holding the skill badges should safely contain all elements. If the screen is too narrow, the items should automatically wrap to a second line (e.g., using flex-wrap: wrap;) or the container should provide a horizontal scrollbar.
Actual Behavior
The "HTML / CSS" pill overflows the dark blue background container on the right side.

Area of the app affected

Homepage form

Python version

3.11.4

Operating system

macos

Relevant error output or logs

Before submitting

  • I searched existing issues and this has not been reported before.
  • I can reproduce this bug consistently with the steps above.
  • I am running the latest version of the main branch.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions