From 1c888467e959f0da3329d568beecdf521906f003 Mon Sep 17 00:00:00 2001
From: AtuyL <atuyl.jp@gmail.com>
Date: Fri, 23 Nov 2018 18:09:47 +0900
Subject: [PATCH] fix: overlay to be not enough filled the.

---
 app/components/title-field.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/title-field.js b/app/components/title-field.js
index 8d96ceec..bf65d620 100644
--- a/app/components/title-field.js
+++ b/app/components/title-field.js
@@ -5,12 +5,13 @@ import Icon from './icon'
 import { Plain as PlainButton, Green as GreenButton } from './button'
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1;
 `
 
 const EditableFieldWrapper = styled.div`
@@ -36,6 +37,10 @@ const EditableFieldWrapper = styled.div`
   }
 `
 
+const ActiveEditableFieldWrapper = styled(EditableFieldWrapper)`
+  z-index: 1;
+`
+
 const InputFieldStyle = styled.input`
   :focus {
     outline: none;
@@ -109,7 +114,7 @@ class TitleField extends Component {
       return (
         <div onClick={e => e.stopPropagation()}>
           <Overlay onClick={() => this.cancel()} />
-          <EditableFieldWrapper className='bg-white nt1 nb1 nl1 shadow-1 flex justify-between'>
+          <ActiveEditableFieldWrapper className='bg-white nt1 nb1 nl1 shadow-1 flex justify-between'>
             {/* why innerRef in following component? check here - styled-components/styled-components#102 */}
             <InputField
               className='bn f6 pl1 normal w-100'
@@ -122,7 +127,7 @@ class TitleField extends Component {
             ) : (
               <PlainButton onClick={() => this.cancel()}>Save</PlainButton>
             )}
-          </EditableFieldWrapper>
+          </ActiveEditableFieldWrapper>
         </div>
       )
     }