X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.scss;h=9eca313203eb4ee8c15a012eacd57c59a00f4b52;hb=30eac84e71eeb99e70861e5ab75c60fd39dac03c;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..9eca31320 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -9,17 +9,6 @@ margin-top: $header-height; } -.title-menu-left { - position: fixed; - height: calc(100vh - #{$header-height}); - padding: 0; - width: $menu-width; - - .title-menu-left-block.menu { - height: 100%; - } -} - .header { height: $header-height; position: fixed; @@ -31,14 +20,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 +37,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 +67,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; } }