Improve display on small screens

ui/src/lib/components/Header.svelte

@@ -115,11 +115,11 @@
     >
         <Logo />
     </NavbarBrand>
-    <Nav class="ms-auto" navbar>
+    <Nav class="ms-auto align-items-center" navbar>
         <HelpButton
             href={helpLink}
             size={$userSession?"sm":undefined}
-            class={$userSession?"my-2":"me-2"}
+            class={$userSession?"my-2":"mx-1"}
         />
         {#if $userSession}
             <Dropdown nav inNavbar>
@@ -164,7 +164,7 @@
             </Dropdown>
         {:else}
             <Button
-                class="me-2"
+                class="mx-1"
                 color="info"
                 href="/resolver"
             >
@@ -176,6 +176,7 @@
             </Button>
 
             <Button
+                class="d-none d-md-inline-block mx-1"
                 outline={activemenu != "join"}
                 color="dark"
                 href="/join"
@@ -187,9 +188,9 @@
                 {$t('menu.signup')}
             </Button>
             <Button
+                class="d-none d-md-inline-block mx-1"
                 outline={activemenu == "join"}
                 color="primary"
-                class="ms-2"
                 href="/login"
             >
                 <Icon

ui/src/lib/components/SignUpForm.svelte

@@ -133,7 +133,7 @@
             bind:value={signupForm.wantReceiveUpdate}
         />
     </FormGroup>
-    <div class="d-flex justify-content-around">
+    <div class="d-flex justify-content-around gap-2">
         <Button type="submit" color="primary" disabled={formSent}>
             {#if formSent}
                 <Spinner

ui/src/lib/components/ZoneList.svelte

@@ -68,11 +68,13 @@
                     on:click={(event) => dispatch("click", event.detail)}
                     let:item={item}
                 >
-                    <div class="font-monospace">
+                    <div class="d-flex my-1" style="min-width: 0">
                         <div class="d-inline-block text-center" style="width: 50px;">
                             <ImgProvider id_provider={item.id_provider} />
                         </div>
-                        {item.domain}
+                        <div class="font-monospace text-truncate flex-shrink-1">
+                            {item.domain}
+                        </div>
                     </div>
                     <slot name="badges" {item} />
                 </HListGroup>

ui/src/routes/domains/[dn]/[[historyid]]/+layout.svelte

@@ -441,7 +441,7 @@
         <Col
             sm={8}
             md={9}
-            class="d-flex"
+            class="d-flex pe-0"
         >
             {#if main_error}
                 <div class="d-flex flex-column mt-3">

ui/src/routes/domains/[dn]/[[historyid]]/+page.svelte

@@ -73,7 +73,7 @@
         <p>{$t('wait.importing')}</p>
     </div>
 {:else}
-    <Row class="pt-3 flex-fill">
+    <Row class="pt-3 flex-fill" style="max-width: 100%">
         <Col class="mb-5">
             {#if !showSubdomainsList}
                 <Button