Because of the small size of the popup, put the error message reported for incorrect values
below the input not next to the input.
This can be done by replacing the span with a div. The table used for layout will position the error appropriately.
The user can scroll the popup window to see the whole error, but on small devices it's possible the user will
just see the red bordered input and the error message will be off screen.
Putting the error below means the user will see the error even in they don't know they need to horizontally scroll.
Also adjust padding on .search-error > .error-message css to add padding-block-start: 0.25em;
Because of the small size of the popup, put the error message reported for incorrect values below the input not next to the input.
This can be done by replacing the span with a div. The table used for layout will position the error appropriately.
The user can scroll the popup window to see the whole error, but on small devices it's possible the user will just see the red bordered input and the error message will be off screen.
Putting the error below means the user will see the error even in they don't know they need to horizontally scroll.
Also adjust padding on
.search-error > .error-messagecss to addpadding-block-start: 0.25em;