From 4263d2196ce5784a51d3c7eec8d943e56d46f074 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 21 Mar 2025 00:44:37 -0700
Subject: [PATCH] Fix: top nav layout with custom title on very narrow screens

---
 .../app/components/app-frame/app-frame.component.html    | 2 +-
 .../app/components/app-frame/app-frame.component.scss    | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

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;