Fix Navbar layout

web/frontend/src/Header.svelte

@@ -8,7 +8,7 @@
         NavbarToggler,
         Dropdown,
         DropdownToggle,
-        DropdownMenu
+        DropdownMenu,
     } from "sveltestrap";
     import NavbarLinks from "./NavbarLinks.svelte";
     import NavbarTools from "./NavbarTools.svelte";
@@ -106,12 +106,13 @@
     </NavbarBrand>
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
     <Collapse
+        style="justify-content: space-between"
         {isOpen}
         navbar
         expand="md"
         on:update={({ detail }) => (isOpen = detail.isOpen)}
     >
-        <Nav class="ms-auto" navbar>
+        <Nav navbar>
             {#if screenSize > 1500 || screenSize < 768}
                 <NavbarLinks
                     {clusters}
@@ -171,7 +172,7 @@
                     </Dropdown>
                 {/each}
             {/if}
-            <NavbarTools username={username} authlevel={authlevel} roles={roles} screenSize={screenSize}/>
         </Nav>
+        <NavbarTools {username} {authlevel} {roles} {screenSize} />
     </Collapse>
 </Navbar>

web/frontend/src/NavbarTools.svelte

@@ -1,6 +1,7 @@
 <script>
     import {
         Icon,
+        Nav,
         NavItem,
         InputGroup,
         Input,
@@ -8,17 +9,17 @@
         InputGroupText,
         Container,
         Row,
-        Col
+        Col,
     } from "sveltestrap";
 
     export let username; // empty string if auth. is disabled, otherwise the username as string
     export let authlevel; // Integer
     export let roles; // Role Enum-Like
-    export let screenSize // screensize
-
+    export let screenSize; // screensize
 </script>
 
-{#if screenSize >= 768}
+<Nav navbar>
+    {#if screenSize >= 768}
         <NavItem>
             <form method="GET" action="/search">
                 <InputGroup>
@@ -27,7 +28,8 @@
                         placeholder="Search 'type:<query>' ..."
                         name="searchId"
                         style="margin-left: 10px;"
-                />  <!-- bootstrap classes w/o effect -->
+                    />
+                    <!-- bootstrap classes w/o effect -->
                     <Button outline type="submit"><Icon name="search" /></Button
                     >
                     <InputGroupText
@@ -67,7 +69,7 @@
                 <Icon name="gear" />
             </Button>
         </NavItem>
-{:else}
+    {:else}
         <NavItem>
             <Container>
                 <Row cols={2}>
@@ -121,4 +123,5 @@
                 </InputGroup>
             </form>
         </NavItem>
-{/if}
+    {/if}
+</Nav>