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 609354c57..675586d1d 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
@@ -280,10 +280,52 @@ main {
   }
 }
 
-@media screen and (min-width: 376px) and (max-width: 768px) {
-  .navbar:not(:has(pngx-chat)) .navbar-toggler {
-    // compensate for 2 buttons on the right
-    margin-right: 45px;
+@media screen and (max-width: 575.98px) {
+  .navbar {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-areas:
+      "toggler brand actions"
+      "search search search";
+  }
+
+  .navbar-toggler {
+    grid-area: toggler;
+    text-align: left;
+  }
+
+  .navbar-brand {
+    grid-area: brand;
+    min-width: 0;
+    max-width: 100%;
+    justify-self: center;
+    overflow: hidden;
+
+    > div,
+    .custom-title {
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+    }
+
+    .title,
+    .byline {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .search-container {
+    grid-area: search;
+    width: 100%;
+  }
+
+  .navbar > ul {
+    grid-area: actions;
+    justify-self: end;
+    flex-wrap: nowrap;
   }
 }
 
@@ -293,13 +335,6 @@ main {
   }
 }
 
-@media screen and (max-width: 345px) {
-  .custom-title {
-    max-width: 110px;
-    overflow: hidden;
-  }
-}
-
 :host ::ng-deep .dropdown.show .dropdown-toggle,
 :host ::ng-deep .dropdown-toggle:hover {
   opacity: 0.7;