badges / badges/shields

Placeholder Text Overflow

Open
#9,558 6 comments 2 reactions 0 assignees View on GitHub
frontend
Dominant language
JavaScript
Stars
27.2k
Forks
5.6k
Avg merge
1d 8h
Merged PRs (30d)
46

Description

### 🐞 Description

All the input fields on in the table have their placeholder texts overflowing.

**Steps to Reproduce**
1. Go to https://shields.io/badges/git-hub-repo-stars
2. Click on show optional parameters:

![image](https://github.com/badges/shields/assets/73214455/ba2e6718-f77e-484f-8ca7-3edd3ebedca2)

4. Observe the overflowing placeholder text.

**Expected Behavior**
The placeholder text should fit comfortably within the designated space of the input field or area without overflowing.

**Screenshots**

![image](https://github.com/badges/shields/assets/73214455/84230c08-ba08-48e9-b811-70c4c9805bdf)

### 🔗 Link to the badge

_No response_

### 💡 Possible Solution

Font size can be reduced.
The content can be rephased to deliver same massage in lesser words.
Placeholder can be removed if feasible because the text is already available in the central component of the page. User can be guided using a placeholder to refer the content from there.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue at the Shields badge page by opening “show optional parameters” and inspecting the table’s input fields. Identify the overflowing placeholder text, then confirm that the revised fields fit within their designated space without overflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.