feat: Move the 'Caps lock is on' dialog below the text (#370)

Co-authored-by: Mark Erwin <>

Author: Merwin4

packages/keybr-textinput-ui/lib/TextArea.module.less

@@ -23,3 +23,9 @@
   background-color: var(--Popup__background-color);
   box-shadow: var(--Popup--small__box-shadow);
 }
+
+.capsLockMessageArea {
+  position: relative;
+  padding: 5px 10px;
+  font-weight: bold;
+}

packages/keybr-textinput-ui/lib/TextArea.tsx

@@ -115,7 +115,7 @@ export function TextArea({
         focus={demo || focus}
       />
       {!demo && focus && ModifierState.capsLock && (
-        <div className={styles.messageArea}>
+        <div className={styles.capsLockMessageArea}>
           <div className={styles.messageText}>
             <FormattedMessage
               id="textArea.capsLock.message"