diff --git a/web/src/ui/MessageComposer.css b/web/src/ui/MessageComposer.css new file mode 100644 index 0000000..81d7972 --- /dev/null +++ b/web/src/ui/MessageComposer.css @@ -0,0 +1,18 @@ +div.message-composer { + display: flex; + border-top: 1px solid #ccc; + > textarea { + flex: 1; + resize: none; + font-family: sans-serif; + height: auto; + padding: .5rem; + border: none; + outline: none; + } + > button { + padding: .5rem; + border: none; + background: none; + } +} diff --git a/web/src/ui/MessageComposer.tsx b/web/src/ui/MessageComposer.tsx index fe2f95b..d4b813d 100644 --- a/web/src/ui/MessageComposer.tsx +++ b/web/src/ui/MessageComposer.tsx @@ -16,6 +16,7 @@ import React, { use, useCallback, useState } from "react" import { RoomStateStore } from "../api/statestore.ts" import { ClientContext } from "./ClientContext.ts" +import "./MessageComposer.css" interface MessageComposerProps { room: RoomStateStore @@ -30,16 +31,21 @@ const MessageComposer = ({ room }: MessageComposerProps) => { client.rpc.sendMessage(room.roomID, text) .catch(err => window.alert("Failed to send message: " + err)) }, [text, room, client]) - return
+ } export default MessageComposer diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css index 9739e18..fd10288 100644 --- a/web/src/ui/RoomView.css +++ b/web/src/ui/RoomView.css @@ -2,10 +2,11 @@ div.room-view { overflow: hidden; height: 100%; display: grid; + border-left: 2px solid #ccc; grid-template: "header" 3rem "messageview" 1fr - "input" 2rem + "input" auto / 1fr; > div.room-header { @@ -20,10 +21,3 @@ div.room-view { } } } - -form.message-composer { - display: flex; - > input { - flex: 1; - } -}