From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 21 Mar 2025 07:44:37 +0000 (-0700)
Subject: Fix: top nav layout with custom title on very narrow screens
X-Git-Tag: v2.15.0^2~18
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d1a3e3b859246f031dce87b66a6683a2b177a09b;p=thirdparty%2Fpaperless-ngx.git

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

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index b3d515274..ff80288aa 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -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>
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 1ad42ca28..774f841e1 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -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;