justinross / foundry-bitd-alternate-sheets

MIT License
5 stars 11 forks source link

Styling: Loadout selection dropdown extends beyond popout #77

Open zxaos opened 1 year ago

zxaos commented 1 year ago

When selecting a loadout, the text and dropdown in the little popout window are wider than the window

Screenshot 2023-07-20 at 23 43 16

justinross commented 1 year ago

Hi! It looks like you've got something going on with your styles/fonts. That's not the default font used in my sheets (see below). It's close, but it's definitely wider/thicker. Maybe a style collision from another module somewhere. I might be able to make that popup more flexible, but because of the way it's hidden/shown, that's a little tricky.

image

zxaos commented 1 year ago

Why it was broken

Yeah, this was absolutely my fault. But I've attached a fix for it anyway below.

It's not another module. I can replicate it with only bitd and the alternate sheets enabled.

However, I did do something else that broke it - I installed the the Kirsty font from https://typodermicfonts.com/kirsty/ because I wanted to be able to make notes and journal entries and stuff that matched the fonts used in the book.

The base BitD system module ships with a version of Kirsty. However it doesn't make it available for use in other parts of foundry, so I installed the one from the web. I'd be surprised if I was the only person who ever tried this.

The version of kirsty that you can find now online is newer than the version that ships with the core module, seems to have a larger default size, a heavier weight in the regular variant, includes an expanded set of glyphs, and doesn't seem to render everything in smallcaps.

A potential fix

I also played with the css for a bit with this and noticed that the popout seems to work correctly if you just don't set a fixed width at all.

This is a one-line change on character-sheet.scss ( See #78 )

At least for me, I think the spacing on the default font looks better after the width is removed too.

I didn't exhaustively test every part of the styles after this, but the resultant css change did seem to be pretty tightly scoped.

Default font - before / fixed width:

init-font-fixed-width

Default font - after / no width:

init-font-no-width

Newer Kristy - before / fixed width:

new-kirsty-fixed-width

Newer Kristy - after / no width:

new-kirsty-no-width