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 b3d515274095df72eabd05c61765f8d1ba04b950..ff80288aa64c2695c2c72cb4f0eb129de62a542b 100644 (file)
--- 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 1ad42ca28302c70aa96d206a7cb63f986479b837..774f841e14e8881667fa6b72e4bad3cdb2de435e 100644 (file)
--- 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;