💄 (notes) fix overflow-x

src/App.vue

@@ -1,11 +1,9 @@
 <template>
-  <div id="app">
+  <!-- <nav>
-    <!-- <nav>
+    <router-link to="/">Home</router-link> |
-      <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
-      <router-link to="/about">About</router-link>
+  </nav> -->
-    </nav> -->
+  <router-view class="app" />
-    <router-view />
-  </div>
 </template>
 
 <script lang="ts">

src/components/StackedNote.vue

@@ -36,6 +36,8 @@ export default defineComponent({
   text-align: left;
   border-top: 1px solid rgba(18, 19, 58, 0.2);
   padding: 0 1rem;
+  overflow-y: auto;
+  height: 100vh;
 }
 
 @media screen and (min-width: 769px) {

src/styles/app.scss

@@ -1,12 +1,35 @@
 @charset "utf-8";
+@import url('https://fonts.googleapis.com/css2?family=Brygada+1918&display=swap');
 @import '~bulma/bulma.sass';
 
 html {
   overflow-y: auto;
 }
 
-html,
 body {
   text-align: center;
-  min-height: 100vh;
+  font-family: 'Brygada 1918', serif;
+  height: 100vh;
+}
+
+@media screen and (min-width: 769px) {
+  html,
+  body {
+    overflow-y: hidden;
+  }
+}
+
+.columns {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+#app {
+  height: 100vh;
+  display: flex;
 }

src/views/Home.vue

@@ -34,8 +34,8 @@
         Not found.
       </div>
     </div>
-    <div class="columns">
+    <div class="note-container">
-      <div class="column">
+      <div class="readme">
         <h1 class="title is-1">
           <router-link
             :to="{ name: 'Home', params: { user, repo } }"
@@ -47,13 +47,14 @@
         <h2 class="subtitle is-2">{{ user }}</h2>
         <p class="note-display" v-html="readme"></p>
       </div>
-      <div
+      <stacked-note
-        class="column"
+        class="note"
         v-for="stackedNote in stackedNotes"
         :key="stackedNote"
-      >
+        :user="user"
-        <stacked-note :user="user" :repo="repo" :sha="stackedNote" />
+        :repo="repo"
-      </div>
+        :sha="stackedNote"
+      />
     </div>
   </div>
 </template>
@@ -86,3 +87,24 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 769px) {
+    .readme,
+    .note {
+      min-width: 620px;
+      max-width: 720px;
+    }
+  }
+
+  .note-container {
+    flex: 1;
+    display: flex;
+    overflow-x: auto;
+  }
+}
+</style>