ye

app/pages/__layout__.html

@@ -110,9 +110,9 @@
           </a>
         </div>
 
-        <div class="d-flex align-items-center gap-2">
+        <div class="navbar-actions d-flex align-items-center gap-2 flex-nowrap">
           <div
-            class=" d-inline-flex align-items-center bg-dark text-white rounded-pill px-3 py-1 border shadow-sm gap-3">
+            class="navbar-currency d-none d-md-inline-flex align-items-center bg-dark text-white rounded-pill px-3 py-1 border shadow-sm gap-3">
             <div class="d-flex align-items-center">
               <span class="rbx-icon-nav-robux me-1 text-white"></span>
               <span class="fw-semibold" id="robux-amount">{{currentuser.robux}}</span>
@@ -125,7 +125,7 @@
           </div>
 
           <div
-            class="nav-item dropdown d-inline-flex align-items-center rounded-pill px-3 py-1 bg-dark border shadow-sm">
+            class="navbar-profile nav-item dropdown d-inline-flex align-items-center rounded-pill px-3 py-1 bg-dark border shadow-sm">
             <a class="nav-link dropdown-toggle d-flex align-items-center p-0" href="#" role="button"
               data-bs-toggle="dropdown" aria-expanded="false">
               <img class="rounded-circle me-2" width="32" height="32"

app/static/css/header.css

@@ -190,11 +190,25 @@ body {
 .navbar .container-fluid {
   justify-content: space-between;
   padding: 0;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .navbar-brand {
   display: flex;
   align-items: center;
+  min-width: 0;
+}
+
+.navbar-actions {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.navbar-currency,
+.navbar-profile {
+  flex-shrink: 0;
 }
 
 .navbar-brand:hover {
@@ -330,6 +344,29 @@ body.has-alert .main-content {
   }
 }
 
+@media (max-width: 767.98px) {
+  .navbar {
+    padding-inline: 0.75rem;
+  }
+
+  .navbar-brand {
+    flex: 1 1 auto;
+  }
+
+  .title-logo {
+    height: 2rem;
+  }
+
+  .navbar-profile {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .navbar-profile .nav-link {
+    white-space: nowrap;
+  }
+}
+
 .subnav-bar {
   display: none;
 }