Placeholder Text Overflow

[ayushichoudhary-19]

🐞 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:

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

🔗 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.

[jNullj]

I just tested with chromium dev tools, this depends on the page width, but i couldn't get all text to fit in for all fields on my screen, you would need a large aspect ratio for that and most users wouldn't have that, even more so on mobile. edit: with that amount of text this is not practical to fit in those little input fields.

I am for using the placeholders as as a reference. We should check if this is configurable by the openapi plugin for docusaurus. (edit: We can set all fields if we want to shorter values) I want to wait and see what the maintainers think about this before changing anything.

Visual example: Change this: Into this:

[chris48s]

So at the moment, the text that gets used as a placeholder is the full documentation for the param, which can be viewed in full elsewhere on the page

e.g:

I don't think I would want to make those worse for the sake of making that text also fit in the placeholder text for the input boxes.

https://github.com/cloud-annotations/docusaurus-openapi/pull/258 would kind of help with this, but it is a slightly different issue.

We should check if this is configurable by the openapi plugin for docusaurus. (edit: We can set all fields if we want to shorter values)

Just to confirm (I've not checked this myself): Are you saying there's a built-in way to customise this? My gut instinct is we'd probably need to override a component or make an upstream contribution to do that.

[jNullj]

If the description of the openapi parameters is multiline you will notice the first line is showing in the field preview, We can use that as a workaround. That would limit as and we should lint this and set the charecter limit for the first line on the openapi description.

Just like you said, another way would be to make an override or even suggest a new feature to the plugin, like using the example field for preview or adding a conf that allows to set example as preview.

Just to confirm (I've not checked this myself): Are you saying there's a built-in way to customise this? My gut instinct is we'd probably need to override a component or make an upstream contribution to do that.

Couldn't find a way to do this other then the workaround, I am sorry for the confusion

As I think this does not present a large issue and there is no haste to solve this we might consider openning an issue to upstream first to test thier view on this.

[chris48s]

I tried putting some line breaks in the param description. The full description still goes into the placeholder.

Using the example value as the placeholder would definitely fit, so definitely looks nicer aesthetically. I'm not sure if it is actually more helpful though. For example, using the example values as placeholder could imply they are defaults, rather than just examples.

I wonder if a descriptive hint (which might overflow) is better or worse than just empty form fields :thinking:

[pr7prashant]

As an alternate solution I would like to suggest using a contextual help beside the label and in the input field we can have some default value instead of description. What do you guys think ?