keyboard reveal + adaptive fix

src/components/keyboard.style.ts

@@ -1,6 +1,15 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
 
+const reveal = keyframes`
+    from {
+        bottom: -600px;
+    }
+    to {
+        bottom: 0;
+    }
+`;
+
 export const Wrapper = styled.div`
     position: absolute;
     bottom: 0;
@@ -12,6 +21,8 @@ export const Wrapper = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    animation: ${reveal} .5s;
+    animation-timing-function: cubic-bezier(0, 0.65, 0.25, 1);
 `;
 
 export const KeyRow = styled.div`
@@ -20,7 +31,6 @@ export const KeyRow = styled.div`
 
 export const BackspaceBtn = styled.img`
     width: 60%;
-    /* height: 8px; */
 `;
 
 export const Key = styled.button`

src/pages/style.ts

@@ -291,7 +291,13 @@ export const FullScreenButton = styled.button`
 export const InputHolder = styled.div`
     background-color: rgba(0, 0, 0, .0);
     width: calc(100% - 70px);
-    height: 100%;
+    height: 60px;
     right: 70px;
+    top: 12px;
+    left: 12px;
     position: absolute;
+
+    @media screen and (max-width: 600px) {
+        width: 100%;
+    }
 `;