Autocomplete extension has layout issues

[diamondsw]

Server Software
about:
title: "HomeBooru"
theme: "danbooru2"

versions:
shimmie: "2.10.0-beta2-20240107-046f70c"
schema: 21
php: "8.2.7"
db: "pgsql PostgreSQL 11.22 on x86_64-pc-linux-musl, compiled by gcc (Alpine 13.2.1_git20231014) 13.2.1 20231014, 64-bit"
os: "Linux 70a3b6c915ca 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64"
server: "Unit/1.31.1"

extensions:
core: ["admin","alias_editor","bbcode","comment","download","et","ext_manager","four_oh_four","handle_pixel","help_pages","image","index","media","mime","setup","static_files","system","tag_edit","tag_list","upgrade","upload","user","user_config","view"]
extra: ["auto_tagger","bulk_add_csv","emoticons_list","et_server","favorites","home","pools","post_titles","random_image","random_list","rating","regen_thumb","relationships","rule34","tag_categories","tag_tools","tagger_xml"]
handled_mimes: ["image/jpeg","image/gif","image/png","image/webp"]

Client Software (please complete the following information)

• Device: MacOS Ventura desktop
• Browser: Safari 17.2.1

What steps trigger this bug
With the autocomplete extension loaded and on the landing page, type part of a very long tag.

What did you expect to happen?
A dropdown list of tags that match, nicely contained in the bounds of the dropdown box.

What actually happened?
Minor layout issue - the box width is sized to match the entry field, rather than expanding to fix the text. Worth noting that this does not occur on the posts page, where it sizes appropriately.

Landing page:

Posts page:

What else?
As a side request, adding tag category colors to the dropdown and matching the font size to the field (right now the dropdown is awkwardly larger than the field it's a dropdown from) would be welcome improvements. You can see examples of this behavior on Danbooru, Gelbooru, Yande.re, etc.

[shish]

I also notice that the landing page has text centered while the posts page is left-aligned - I feel like "always be left-aligned" makes most sense, but I'm accustomed to themes which are left-aligned by default so would welcome a second opinion there

[shish]

Colouring of completions split into a separate issue - #1002

[diamondsw]

Your attention to (very minor!) visual issues is always greatly appreciated. :)

[shish]

Fixing the autocompleter font size on the danbooru2 theme had a side-effect of making the rest of the layout change scale a little... but it changed to be closer to danbooru.donmai.us, so I'm keeping that as accidentally intentional ^^

[shish]

I thiiink the several things mentioned here are fixed now (apart from the tag-colouring which has been split into a separate feature request)

[diamondsw]

Looking much better (bounding box is properly sized, text is left-aligned). The text size is still larger than the field itself (on both the landing page and posts page, at least on MacOS/Safari.

[shish]

TIL the browser's default stylesheet sets input-text to be smaller than regular-text, and it looks like different browsers set it smaller in slightly-different ways T__T

[diamondsw]

Ah, I did not know that. Obviously not very important; just something I noticed was different.

[shish]

"input box font size" and "completion suggestions font size" should now both be explicitly set to equal "general font size". For some reason that I don't understand, Safari still wants those to look slightly different... I will leave it up to you to decide if that's close-enough ^^;;

(And if anybody can figure out why Safari insists that input-text size and general-text size need to be slightly different, pull requests to fix that would be welcomed)