Fix: top nav layout with custom title on very narrow screens

This commit is contained in:
shamoon 2025-03-21 00:44:37 -07:00
parent 79ae594d54
commit d1a3e3b859
No known key found for this signature in database
2 changed files with 9 additions and 2 deletions

View File

@ -15,7 +15,7 @@
</svg>
<div class="ms-2 ms-md-3 d-inline-block" [class.d-md-none]="slimSidebarEnabled">
@if (customAppTitle?.length) {
<div class="d-flex flex-column align-items-start">
<div class="d-flex flex-column align-items-start custom-title">
<span class="title">{{customAppTitle}}</span>
<span class="byline text-uppercase font-monospace" i18n>by Paperless-ngx</span>
</div>

View File

@ -244,7 +244,7 @@ main {
}
}
@media screen and (max-width: 768px) {
@media screen and (min-width: 366px) and (max-width: 768px) {
.navbar-toggler {
// compensate for 2 buttons on the right
margin-right: 45px;
@ -257,6 +257,13 @@ main {
}
}
@media screen and (max-width: 345px) {
.custom-title {
max-width: 102px;
overflow: hidden;
}
}
:host ::ng-deep .dropdown.show .dropdown-toggle,
:host ::ng-deep .dropdown-toggle:hover {
opacity: 0.7;