External Links "URL" textbox is small on mobile portrait orientation - Githubissues

VocaDB / vocadb

VocaDB is a Vocaloid Database with translated artists, albums, music videos and more.

https://vocadb.net

Other

348 stars 39 forks source link

External Links "URL" textbox is small on mobile portrait orientation #1774

Open szhublox opened 5 months ago

szhublox commented 5 months ago

Website (required)

VocaDB

Describe the bug (required)

Description field gets screen space priority and leaves URL field with nothing if screen width is low enough

To Reproduce (optional)

Steps to reproduce the behavior:

edit an entry
go to external links section
if necessary, click new row

Expected behavior (optional)

Allocate space more evenly across the row or possibly split into multiple lines

Screenshots (optional)

https://discord.com/channels/309072240639737866/666326527197315091/1249811826443550892

Smartphone (optional)

portrait orientation

Checklist (required)

Fill out the checklist. Use ~~strikethroughs~~ or leave fields empty if you don't know or are unable to check/test.

[x] Searched VocaDB/vocadb for duplicate issues.
[x] Tested on the beta site.
[x] Tested on different browsers (e.g. Firefox, Chrome, Safari, Edge).
[ ] Checked in private mode.
[ ] Cleared browser cache and cookies.
[ ] Checked the DevTools console.
[ ] Checked the syslog (mods+ only).

Susko3 commented 2 weeks ago

The bug seems to be caused by the following CSS excerpt (location in code):

@media (max-width: 767px) {
  .input-xlarge {
    width: 100%;
  }
}

Disabling the width: 100% in the firefox inspector fixes it in the mobile preview. The final CSS is width: 270px instead.