chord display site

src/routes/+layout.svelte

@@ -26,6 +26,7 @@
     for (let i = 0; i < chordCount; i++) {
       chordInfo.push(await device.getChord(i))
     }
+    chordInfo.sort(({phrase: a}, {phrase: b}) => a.localeCompare(b))
     chords.set(chordInfo)
     syncing.set(false)
   })
@@ -33,11 +34,14 @@
 
 <Navigation />
 
-<slot />
+<main>
+  <slot />
+</main>
 
 <style lang="scss" global>
   * {
     box-sizing: border-box;
+    appearance: none;
   }
 
   a {
@@ -45,12 +49,32 @@
   }
 
   body {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+
     font-family: "Noto Sans Mono", monospace;
     color: var(--md-sys-color-on-background);
+
     background: var(--md-sys-color-background);
   }
 
+  main {
+    contain: strict;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+
+    padding: 16px;
+  }
+
   h1 {
+    margin-block-start: 0;
     font-size: 4rem;
     font-weight: 900;
     color: var(--md-sys-color-secondary);