Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(TopBar): align lines #12875

Merged
merged 2 commits into from
Aug 6, 2024
Merged

fix(TopBar): align lines #12875

merged 2 commits into from
Aug 6, 2024

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Aug 1, 2024

☑️ Resolves

  • With the default line-height one-line is 1.5 height of font
  • In a limited spaces and with different font sizes, it looks a bit not aligned for me
    • The gap between lines is higher than between line and bottom border
    • Small text may look too small
  • Using normal (about 1.2) line height ensures that the text is not cut off but also has no extra height even with normal font-size

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before 🏡 After
image image
image image
image image

🏁 Checklist

@marcoambrosini
Copy link
Member

I don't think this is ok for accessibility. Could check that?

@ShGKme
Copy link
Contributor Author

ShGKme commented Aug 1, 2024

I don't think this is ok for accessibility. Could check that?

With any solution it changes the top bar height, no matter what line height is set initially, if yuo mean this check.

image

@ShGKme ShGKme marked this pull request as ready for review August 5, 2024 09:24
@ShGKme ShGKme marked this pull request as draft August 5, 2024 09:36
@ShGKme ShGKme force-pushed the fix/top-bar--line-height branch 2 times, most recently from d6ef3b8 to afea58c Compare August 5, 2024 09:56
@ShGKme ShGKme marked this pull request as ready for review August 5, 2024 10:03
@ShGKme
Copy link
Contributor Author

ShGKme commented Aug 5, 2024

Updated to normal font-size with normal line-height everywhere

Copy link
Contributor

@Antreesy Antreesy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On Linux (evaluates to 22px):

B A
image image

Diff:
image

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme
Copy link
Contributor Author

ShGKme commented Aug 6, 2024

  • Changed normal to 1.2 to make sure, it's the same in all browsers and OSs.
  • Removed --text-height to make min-height based on similar elements size

@ShGKme ShGKme requested a review from Antreesy August 6, 2024 15:26
display: flex;
flex-wrap: wrap;
z-index: 10;
gap: 3px;
align-items: center;
justify-content: flex-end;
min-height: calc(2 * var(--default-grid-baseline) + var(--text-height) + var(--border-width));
min-height: calc(var(--border-width) + 2 * (2 * var(--default-grid-baseline)) + var(--default-clickable-area));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Call Container uses magic number 60 or close, need to be updated to the same value there too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in a hotfix

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, but I thought, we're going for variables)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found it more complex and risky. CallView is used in different entrypoints and not directly related to TopBar

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
@ShGKme ShGKme merged commit 9acebc2 into main Aug 6, 2024
46 checks passed
@ShGKme ShGKme deleted the fix/top-bar--line-height branch August 6, 2024 15:50
@ShGKme
Copy link
Contributor Author

ShGKme commented Aug 6, 2024

Follow-up: use CSS variables in call view

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants