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

Co-authored-by: Mark Erwin <>
aradzie · Jan 17, 2025 · 6553f6d · 6553f6d
1 parent 30d1b85
commit 6553f6d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/keybr-textinput-ui/lib/TextArea.module.less b/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;
+}
diff --git a/packages/keybr-textinput-ui/lib/TextArea.tsx b/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"