Instance banner image in sidebar is stretched disproportionately

[weiteck]

What version of Tesseract has this bug? v1.2.9.31

Describe the bug Instance banner images are stretched disproportionately to fill the card.

To Reproduce Steps to reproduce the behavior:

1. Deploy from main and view sidebar

Expected behavior Banner should not be distorted.

Screenshots Banner is stretched:

Banner should be centered and sized to fit, IMO:

Desktop (please complete the following information):

• OS: Pop! OS
• Browser: Firefox and Chrome
• Version: 124 and 123

Smartphone (please complete the following information):

• Device: S21
• OS: Android 13
• Browser: Firefox
• Version: 124.1

Additional context I have edited src/lib/components/ui/Card.svelte to change the behaviour for my deployment at tes.leminal.space.

[asimons04]

The stretching was a compromise to make it work the most compatibly. I agree it's not ideal.

Unfortunately, there's no standardized size for banners, so I had to pick the method that looked least worst for the most number of banners in the wild (I point my dev version to random instances to see how various banners fit).

Changing to background-size: cover, for example, looks good with, say, 70% of banners in use but then 30% just look worse than if they were stretched.

To be honest, adding the semi-transparent banners to the card was more to add some contrast/flair than to show off the banners properly.

I may be able to add an environment variable and user setting that could allow the admin to switch between "stretch" and "cover" modes. The environment variable would set the default behavior and the user option would allow users to change it from the UI.

[asimons04]

So yeah, this works for me if it works for you. It should cover most use cases, though admins may need to set the default "stretch" behavior depending on how well their chosen banner image renders.

I have this implemented in 1.3.0 (not sure if I want to backport it to 1.2.9.x since I'm only doing bugfixes on that).

Changes:

• Banners no longer stretch by default
• Admin can set the env var PUBLIC_STRETCH_CARD_BANNERS=true to stretch them by default.
• User option has been added to App Settings to allow user override

Default (Not stretched - env var is not set one way or another)

App Setting to Control Stretch/Auto Behavior

Stretch Banner option toggled to 'on'

[weiteck]

Thanks for looking at this. I think having it optional is a good enhancement given the variety of banner sizes out there.

[asimons04]

Sounds good. This is implemented in the current nightly branch of 1.3.0. Don't think I'm going to backport it since it's an enhancement rather than a bugfix.