From dbb9d8065dae8c12e52b34c9b52bb157b704cde5 Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 24 Apr 2019 16:58:25 +0900
Subject: [PATCH] Change to scrollable overlay inner

---
 src/components/globals/BaseOverlay.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/globals/BaseOverlay.vue b/src/components/globals/BaseOverlay.vue
index 8fee3e70..f039472c 100644
--- a/src/components/globals/BaseOverlay.vue
+++ b/src/components/globals/BaseOverlay.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div class="overlay">
-      <button type="button" class="close-button" @click="closeOverlay">x</button>
+      <button type="button" class="close-button" @click="closeOverlay">X</button>
       <h1>{{ title }}</h1>
       <div class="overlay-inner">
         <slot/>
@@ -40,11 +40,16 @@ export default class BaseOverlay extends Vue {
   top: 50%;
   transform: translateY(-50%);
   width: 100vw;
+  max-width: 100vw;
   height: 100vh;
+  max-height: 100vh;
   background-color: var(--bg-color);
 }
 .overlay-inner {
-  margin: 1em;
+  margin: 0.5em;
+  height: calc(100% - 50px - 1em);
+
+  overflow: scroll;
 }
 .close-button {
   position: fixed;
@@ -60,7 +65,7 @@ export default class BaseOverlay extends Vue {
   width: 50px;
   height: 50px;
 
-  font-size: 1.8rem;
+  font-size: 1.5rem;
 }
 h1 {
   top: 0;