Fix small style things

src/partials/Anchor.svelte

@@ -15,9 +15,9 @@
     {"opacity-50": loading},
     switcher(type, {
       anchor: "underline",
-      button: "py-2 px-4 rounded bg-white text-accent",
-      'button-circle': "w-10 h-10 flex justify-center items-center rounded-full bg-white text-accent",
-      'button-accent': "py-2 px-4 rounded bg-accent text-white",
+      button: "py-2 px-4 rounded bg-white text-accent whitespace-nowrap",
+      'button-circle': "w-10 h-10 flex justify-center items-center rounded-full bg-white text-accent whitespace-nowrap",
+      'button-accent': "py-2 px-4 rounded bg-accent text-white whitespace-nowrap",
     }),
   )
 </script>

src/partials/Modal.svelte

@@ -2,7 +2,6 @@
   import {fly, fade} from "svelte/transition"
 
   export let onEscape = null
-  export let nested = false
 
   let root
 </script>
@@ -16,16 +15,13 @@
 
 <div class="fixed inset-0 z-30 modal" bind:this={root}>
   <div
-    class="absolute inset-0 bg-black"
+    class="absolute inset-0 bg-black opacity-75"
     class:cursor-pointer={onEscape}
-    class:opacity-75={!nested}
-    class:opacity-25={nested}
     transition:fade
     on:click={onEscape} />
   <div
     class="absolute inset-0 mt-20 sm:mt-28 modal-content"
-    transition:fly={{y: 1000, opacity: 1}}
-    style={nested && `padding-top: 1rem`}>
+    transition:fly={{y: 1000, opacity: 1}}>
     <div class="bg-dark border-t border-solid border-medium h-full w-full overflow-auto pb-10">
       <slot />
     </div>

src/views/TopNav.svelte

@@ -19,7 +19,7 @@
   class="fixed top-0 bg-dark flex justify-between items-center text-white w-full p-4
             border-b border-medium z-10 h-16"
 >
-  <button class="lg:hidden fa fa-bars fa-2xl cursor-pointer" on:click={toggleMenu} />
+  <div class="lg:hidden fa fa-bars fa-2xl cursor-pointer" on:click={toggleMenu} />
   <Anchor external type="unstyled" href="https://github.com/staab/coracle" class="flex items-center gap-2">
     <img alt="Coracle Logo" src="/images/logo.png" class="w-8" />
     <h1 class="staatliches text-3xl">Coracle</h1>

src/views/login/ConnectUser.svelte

@@ -121,7 +121,7 @@
 </Content>
 
 {#if modal}
-<Modal nested onEscape={modal === 'success' ? null : () => { modal = null }}>
+<Modal onEscape={modal === 'success' ? null : () => { modal = null }}>
   <Content>
     {#if modal === 'success'}
     <div class="text-center my-12">Success! Just a moment while we get things set up.</div>

src/views/notes/Note.svelte

@@ -352,7 +352,7 @@
 {/if}
 
 {#if showRelays}
-<Modal nested onEscape={() => { showRelays = false }}>
+<Modal onEscape={() => { showRelays = false }}>
   <Content>
     <RelayCard theme="black" showControls relay={{url: note.seen_on}} />
   </Content>

src/views/notes/NoteCreate.svelte

@@ -122,7 +122,7 @@
 </form>
 
 {#if showSettings}
-<Modal nested onEscape={closeSettings}>
+<Modal onEscape={closeSettings}>
   <form on:submit|preventDefault={closeSettings}>
     <Content>
       <div class="flex justify-center items-center mb-4">