Use flexbox for page layout

frontend/src/views/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
+  <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
     <div>
       <img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
       <!-- prefetching -->
@@ -105,7 +105,7 @@ export default {
 
 <style scoped>
 .reader {
-  display: grid;
+  display: flex;
   position: relative;
 }
 
@@ -126,6 +126,7 @@ img {
 }
 
 .sidebar {
+  flex: 0 0 250px;
   background-color: #eee;
   height: 100vh;
   position: sticky;