New sign-in page has hardcoded logo width

Summary

A new login page was introduced by !91673 (merged)
The login page had a hard-coded GitLab logo, this was reported in #375269 (closed) and fixed in !98898 (merged)

But the width of the logo is still hard-coded to 3.5rem which is applied by the CSS class gl-w-10.

This is a major problem for a logo with a rectangular and horizontal shape. For example with a logo with the following size of 640px by 192px, the displayed logo is really small.

In Settings > Appearance > Sign in/Sign up pages, the following message is displayed:

Pages are optimized for a 640x360 px logo.

Steps to reproduce

  1. Start Gitlab in version 15.5.0
  2. Log in and go to Admin > Settings > Appearance > Sign in/Sign up pages
  3. Upload a logo with size of 640px x 192px
  4. Open the login page in Incognito mode and see that the logo is displayed with the following dimension 56x16.8px

Example Project

Not applicable

What is the current bug behavior?

The logo is too small

The CSS class gl-w-10 is applied to the logo: https://gitlab.com/gitlab-org/gitlab/-/blob/v15.5.0-ee/app/helpers/appearances_helper.rb#L17

What is the expected correct behavior?

The logo should have a "correct" size. Perhaps it should have its original size but be limited in width and height to something reasonable.

Relevant logs and/or screenshots

...

Possible fixes

Apply this CSS rules:

  • width: 3.5rem if the height of the image is larger than the width, or
  • height: 3.5rem if the height of the image is smaller than the width.

I don't know how to do that purely in CSS. In JavaScript I would displayed the image in a place that is not visible to the user, compute the size and apply the right style accordingly.

In addition the vertical spacing at the bottom needs to be fixed when the sign-in contains two columns (because of custom description)

Edited by Eduardo Sanz García