Input -> Textarea

pico.css

@@ -6,10 +6,10 @@ body {
     display: grid;
     grid-template-areas:
         'posts online'
-        'actions online'
+        'actions actions'
     ;
     grid-template-columns: 1fr auto;
-    grid-template-rows: 150px auto;
+    grid-template-rows: 140px auto;
 
     position: fixed;
     top: 0;
@@ -34,6 +34,11 @@ body {
 }
 .actions {
     grid-area: actions;
+    display: grid;
+    grid-template-columns: 1fr auto;
+}
+#textbox {
+    resize: vertical;
 }
 .post > div {
     display: inline;

pico.js

@@ -1,3 +1,4 @@
+const isLandscape = screen.width > screen.height
 const State = {
     username: null,
     websocket: null,
@@ -117,6 +118,14 @@ const prettyTime = (ts) => {
     const S = `0${dt.getSeconds()}`.slice(-2)
     return `${H}:${M}:${S}`
 }
+const hotKey = (e) => {
+    // if isDesktop, Enter posts, unless Shift+Enter
+    // use isLandscape as proxy for isDesktop
+    if(e.key === 'Enter' && isLandscape && !e.shiftKey) {
+        e.preventDefault()
+        Chat.sendPost()
+    }
+}
 const Video = {
     appendStream: ({username, stream}) => ({dom}) => {
         dom.autoplay = true
@@ -191,12 +200,10 @@ const Login = {
     },
 }
 const Chat = {
-    sendPost: (e) => {
-        e.preventDefault()
-        const field = e.target.text
-        if(field.value) {
-            wire({kind: 'post', value: field.value})
-            field.value = ''
+    sendPost: () => {
+        if(textbox.value) {
+            wire({kind: 'post', value: textbox.value})
+            textbox.value = ''
         }
     },
     view() {
@@ -208,9 +215,9 @@ const Chat = {
                     m('.text', post.value),
                 )),
             ),
-            m('form.actions', {onsubmit: Chat.sendPost},
-                m('input', {oncreate: autoFocus, name: 'text', autocomplete: 'off'}),
-                m('button', 'Send'),
+            m('.actions',
+                m('textarea#textbox', {oncreate: autoFocus, onkeydown: hotKey}),
+                m('button', {onclick: Chat.sendPost}, 'Send'),
             ),
             m('.online',
                 m('button', {onclick: Login.sendLogout}, 'Logout'),