IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prevent topic title from clipping some characters due to overflow

Browse Source
This commit is contained in:
Kris 2020-07-27 17:26:48 -04:00
parent 25f6136b27
commit 89f6ff1574
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/common/base/header.scss
View File

@ -261,6 +261,12 @@
color: $header_primary; color: $header_primary;
display: block; display: block;
@include ellipsis; @include ellipsis;
// Some characters like '/' and 'j' can be wider than the font's em-box
// this causes some left/right text clipping with overflow hidden
// extra padding adds space to account for this; negative margin repositions
$wiggle-room: 0.15em;
padding-left: $wiggle-room;
margin-left: -#{$wiggle-room};
} }
.topic-statuses { .topic-statuses {
.d-icon { .d-icon {

2
app/assets/stylesheets/desktop/topic.scss
View File

@ -27,7 +27,7 @@
h1 { h1 {
font-size: $font-up-4; font-size: $font-up-4;
line-height: $line-height-medium; line-height: $line-height-medium;
overflow: hidden; overflow-wrap: break-word;
width: 100%; width: 100%;
a { a {
color: $primary; color: $primary;