X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.scss;h=6edf966f99717b6fe2f4e6fda9eec80387517390;hb=ad9e39fb815d85e5e718c40540fa75471474fa17;hp=d502d63b5c385ddd11020fddc3abc8fe1bb31071;hpb=1f788f2044928325e48c5d88ecbc72501873558e;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index d502d63b5..6edf966f9 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -31,14 +31,15 @@ display: flex; .top-left-block { - width: $menu-width; z-index: 1001; height: $header-height; display: flex; align-items: center; + flex: 1; + min-width: 0; .icon { - @include icon(22px); + @include icon(24px); &.icon-menu { background-image: url('../assets/images/header/menu.svg'); @@ -47,13 +48,20 @@ } #peertube-title { + @include disable-default-a-behaviour; font-size: 20px; font-weight: $font-bold; color: inherit !important; display: flex; align-items: center; + overflow: hidden; - @include disable-default-a-behaviour; + .instance-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + } .icon.icon-logo { display: inline-block; @@ -70,14 +78,18 @@ display: none; } } + + @media screen and (max-width: 350px) { + flex: auto; + } } .header-right { height: $header-height; display: flex; align-items: center; - flex-grow: 1; justify-content: flex-end; + white-space: nowrap; } }