From 8c94f5932dff422374125097b31e5f8696851c22 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 14 Mar 2021 01:18:54 +0100
Subject: [PATCH] :lipstick: (notes) fix overflow-x

---
 src/App.vue                    | 12 +++++-------
 src/components/StackedNote.vue |  2 ++
 src/styles/app.scss            | 27 +++++++++++++++++++++++--
 src/views/Home.vue             | 36 +++++++++++++++++++++++++++-------
 4 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ca9f85b..f5c02ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,9 @@
 <template>
-  <div id="app">
-    <!-- <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav> -->
-    <router-view />
-  </div>
+  <!-- <nav>
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </nav> -->
+  <router-view class="app" />
 </template>
 
 <script lang="ts">
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index d82048b..ee0b977 100644
--- a/src/components/StackedNote.vue
+++ b/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) {
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 5c45711..578081a 100644
--- a/src/styles/app.scss
+++ b/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;
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2b1aadb..5f5120f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -34,8 +34,8 @@
         Not found.
       </div>
     </div>
-    <div class="columns">
-      <div class="column">
+    <div class="note-container">
+      <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
-        class="column"
+      <stacked-note
+        class="note"
         v-for="stackedNote in stackedNotes"
         :key="stackedNote"
-      >
-        <stacked-note :user="user" :repo="repo" :sha="stackedNote" />
-      </div>
+        :user="user"
+        :repo="repo"
+        :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>