diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss index e7c6863f1..b5c78e080 100644 --- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -58,12 +58,10 @@ .video-info-account { @include disable-default-a-behaviour; + @include ellipsis; display: block; width: fit-content; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; font-size: 14px; color: $grey-foreground-color; diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 881f3ff31..3f8b9777a 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -48,9 +48,8 @@ overflow: hidden; .instance-name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + @include ellipsis; + width: 100%; } diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 69704674a..137df6fc1 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -10,12 +10,12 @@ } menu { + @include ellipsis; + background-color: var(--menuBackgroundColor); margin: 0; padding: 0; height: 100%; - white-space: nowrap; - text-overflow: ellipsis; overflow: auto; color: var(--menuForegroundColor); display: flex; @@ -40,10 +40,9 @@ menu { margin-bottom: 35px; .logged-in-info { + @include ellipsis; + flex-grow: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; .logged-in-display-name { font-size: 16px; @@ -55,11 +54,10 @@ menu { } .logged-in-username { + @include ellipsis; + font-size: 13px; color: #C6C6C6; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; max-width: 140px; } } diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 6de13d276..e0509ee15 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -80,12 +80,10 @@ .video-info-account { @include disable-default-a-behaviour; + @include ellipsis; display: block; width: fit-content; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; font-size: 14px; color: $grey-foreground-color; diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 66e59e6d3..c118fc3a1 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -44,11 +44,9 @@ .video-miniature-account, .video-miniature-channel { @include disable-default-a-behaviour; + @include ellipsis; display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; font-size: 13px; color: $grey-foreground-color; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 6fb9bf200..c2e200a14 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -18,6 +18,12 @@ } } + +@mixin ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} /** * This mixin will crop text in block for needed amount of lines and put ellipsis at the end *