"Insert > Symbol" Dialog: Odd Alignment for Recent Characters

[Tex2002ans]

Describe the Bug

The "Recent Characters" little preview boxes in the:

• Insert > Symbol

dialog are placed very strangely:

compared to the same menu in LibreOffice:

Steps to Reproduce

1. Go to "Insert" Tab.
2. Press "Symbol" button.
3. Choose a few characters in the dialog by double-clicking on them.
4. Observe the "Recent Characters" put huge gaps between the characters.

Actual Behavior

Boxes being centered(?).

Expected Behavior

Left-aligned boxes.

Desktop

• OS: Linux Mint 21.1
• Browser: Firefox
• Version: 117.0 (64-bit)

COOLWSD version: 23.05.2.2 (git hash: 6d7efe9)
LOKit version: Collabora Office 23.05.2.3 (git hash: 6d3919c)
Served by: Linux Mint 21.1
Server ID: ee10cf42

Additional Context

None.

Some observations though:

• That menu could probably use a little touch-up though, even along the right-hand side.
• The dialog seems "very wide". On my widescreen, it made it a little awkward to place the dialog so I could still see what's happening in the document itself.
  • I suspect this'll be worse on narrower/vertical screens, or if you had COOL open along one-half of a screen.
• The scrollbar where all the characters are located is super-thin/nearly-invisible. If I didn't see the original dialog, I probably wouldn't have known you could scroll it.

[Andreas-Kainz]

There are two options to fix this UX bug

1. define a fix number of items for recent and favorite characters to show, so add a new character will replace an "empty" character element.
2. make the grid left align and add some grid-gap in the css file

Nr. 1. need code change, and is a larger fix. I can offer an PR for 2. whit align the items (doesn't meter how much items will be there) well.

Nr. 2 fix justify-content: start and grid-gap: 10px

@pedropintosilva your suggestion?