From d246a94f427706ba80ac39117f24c5af61202109 Mon Sep 17 00:00:00 2001
From: Tobias Berger <tobi.berger13@gmail.com>
Date: Mon, 27 Sep 2021 14:04:42 +0200
Subject: [PATCH] Fix title not being in-line

---
 src/components/Header.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 98bfac4..1ee615f 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -47,7 +47,7 @@
       <li><a on:click={onClick} href={"javascript:;"}>{name}</a></li>
     {/each}
   </ul>
-  {SharkGame.title}
+  <span>{SharkGame.title}</span>
   <ul id="other-header-buttons">
     {#each Object.entries(otherHeaderButtons) as [name, onClick]}
       <li>
@@ -62,6 +62,10 @@
 
 <style lang="scss">
   header {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+
     width: 100%;
     background-color: var(--color-dark);
     text-shadow: 2px 2px 3px var(--color-darker);
@@ -109,6 +113,12 @@
       &#other-header-buttons {
         float: right;
       }
+
+      &:is(#main-header-buttons, #other-header-buttons)::after {
+        content: "";
+        clear: both;
+        display: table;
+      }
     }
   }
 </style>