From e2be869a7ab98884efbdd5baa9691029ad9321da Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 9 Sep 2024 11:59:36 +0200
Subject: [PATCH] Slightly improve navbar wrapping for long status title +
 narrow window

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/mantine-ui/src/App.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/ui/mantine-ui/src/App.tsx b/web/ui/mantine-ui/src/App.tsx
index 1b15f01800..dd69cff38c 100644
--- a/web/ui/mantine-ui/src/App.tsx
+++ b/web/ui/mantine-ui/src/App.tsx
@@ -339,9 +339,13 @@ function App() {
               padding="md"
             >
               <AppShell.Header bg="rgb(65, 73, 81)" c="#fff">
-                <Group h="100%" px="md">
-                  <Group style={{ flex: 1 }} justify="space-between">
-                    <Group gap={65}>
+                <Group h="100%" px="md" wrap="nowrap">
+                  <Group
+                    style={{ flex: 1 }}
+                    justify="space-between"
+                    wrap="nowrap"
+                  >
+                    <Group gap={65} wrap="nowrap">
                       <Link
                         to="/"
                         style={{ textDecoration: "none", color: "white" }}
@@ -351,11 +355,11 @@ function App() {
                           <Text fz={20}>Prometheus{agentMode && " Agent"}</Text>
                         </Group>
                       </Link>
-                      <Group gap={12} visibleFrom="sm">
+                      <Group gap={12} visibleFrom="sm" wrap="nowrap">
                         {navLinks}
                       </Group>
                     </Group>
-                    <Group visibleFrom="xs">
+                    <Group visibleFrom="xs" wrap="nowrap">
                       <ThemeSelector />
                       <SettingsMenu />
                     </Group>