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

[style] slightly increase header line-height #6656

Merged
merged 1 commit into from
Mar 25, 2016

Conversation

spalger
Copy link
Contributor

@spalger spalger commented Mar 24, 2016

Fixes #6637

On the index pattern page we use overflow:hidden; to use css elipses on the title of index patterns. This works great, but because of the line-height of 1.1 low hanging letters get cut off (the bottom of the g in logstash for instance). Increasing the line-height slightly has no real effect on layout because the letters naturally overflow the current line-height, but in scenarios with overflow: hidden it prevents the letters from getting cutoff.

On the index pattern page we use overflow:hidden; to use css elipses on the title of index patterns. This works great, but because of the line-height of 1.1 low hanging letters get cut off (the bottom of the g in logstash for instance). Increasing the line-height slightly has no real effect on layout because the letters naturally overflow the current line-height, but in scenarios with overflow: hidden it prevents the letters from getting cutoff.
@@ -46,7 +46,7 @@
//** By default, this inherits from the `<body>`.
@headings-font-family: @font-family-base;
@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-line-height: 1.3;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there a reason why we have to set this explicitly instead of just letting the browser do its thing with line-height: normal;? This particular height might work with open sans, but I haven't tested it on every font in the font family on every OS in every browser.

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 believe it's because bootstrap uses the line-height for certain calculations (like how tall this or that should be) but I'm not sure. It's bs (bootstrap).

@Bargs
Copy link
Contributor

Bargs commented Mar 25, 2016

Left one suggestion, but otherwise LGTM.

@Bargs Bargs assigned spalger and unassigned Bargs Mar 25, 2016
@spalger spalger merged commit 26ecfc0 into elastic:master Mar 25, 2016
@spalger spalger deleted the fix/headingCutoff branch October 18, 2019 17:38
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