Align chat composer controls at a shared 44px height

1 files changed, 8 insertions, 2 deletions

diff --git a/src/style.css b/src/style.css
index a04df82..592ca7f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -264,7 +264,7 @@ coinos-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; bord
 coinos-text[data-empty]::before { content: attr(placeholder); color: var(--muted); pointer-events: none; }
 /* the hint is text in the flow, so the caret would blink after it: gone once you're in */
 coinos-text[data-empty]:focus::before { content: none; }
-.chat-compose coinos-text { flex: 1; min-width: 0; padding: 10px 13px; max-height: 120px; }
+.chat-compose coinos-text { flex: 1; min-width: 0; min-height: var(--chat-control-size); padding: 10px 13px; line-height: 22px; max-height: 120px; }
 .mono-input { font-family: var(--mono); }
 .input-group { display: flex; gap: 8px; }
 .input-group input { flex: 1; }
@@ -616,9 +616,15 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
   .zap-tally.flying, .zap-tally.flying svg { animation: none; opacity: .7; }
 }
 .chat-compose {
+  --chat-control-size: 44px;
   display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line);
   align-items: center; flex: 0 0 auto;
 }
+.chat-compose > button {
+  flex: none; height: var(--chat-control-size); min-width: var(--chat-control-size);
+  padding: 0 11px; border-radius: 11px;
+  display: flex; align-items: center; justify-content: center;
+}
 .chat-compose input, .chat-compose textarea {
   flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper);
   border: 1px solid var(--line-strong); border-radius: 11px; padding: 10px 13px;
@@ -1308,7 +1314,7 @@ body::after {
 /* an encrypted picture on its way: a box the picture's shape, then the picture */
 .chat-attach-ph { display: block; width: 240px; max-width: 100%; max-height: 320px; margin-top: 6px; border-radius: 10px; background: var(--line); }
 .chat-attach { display: inline-block; margin-top: 6px; }
-.chat-clip { flex: none; align-self: flex-end; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
+.chat-clip { width: var(--chat-control-size); }
 .msg-sheet-emojis button.more { flex: 0 0 40px; font-size: 20px; color: var(--muted); }
 .emoji-grid { display: flex; flex-wrap: wrap; gap: 2px; max-height: 260px; overflow-y: auto; }
 .emoji-grid button { width: 40px; height: 40px; font-size: 22px; line-height: 1; border: 1px solid transparent; border-radius: 8px; background: none; padding: 0; }