main-content layout

assets/css/base/_layout.scss

@@ -31,9 +31,13 @@ body{
   section[role="main-content"]{
     flex:1 1 auto;
     @extend %layout-element;
-    padding:0 $side-padding 0 $side-padding;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
+    >.wrapper{
+      padding:0 $side-padding 0 $side-padding;
+      height:100vh;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
   }
   footer[role="tools"]{
     flex:0 0 auto;

src/App.vue

@@ -12,7 +12,9 @@
       </div>
     </header>
     <section role="main-content">
-      <RouterView />
+      <div class="wrapper">
+        <RouterView />
+      </div>
     </section>
     <footer role="tools">
       <History />

src/pages/Item.vue

@@ -1,13 +1,16 @@
 <template>
   <transition name="fade" appear>
     <span v-if="!loaded">Loading...</span>
-    <article v-else class="item">
-      <header>
+    <article v-else class="item row">
+      <header class="col-3">
         <h1>
           {{ item.title }}
         </h1>
       </header>
-      <section v-html="item.tei" />
+      <section v-html="item.tei" class="col-6"/>
+      <section class="col-3">
+        tree
+      </section>
     </article>
   </transition>
 </template>