style: message form

jackrosa183 · Sep 6, 2024 · c459a19 · c459a19
1 parent 484c523
commit c459a19
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/app/views/messages/_form.html.erb b/app/views/messages/_form.html.erb
@@ -1,4 +1,6 @@
-<%= form_with(model: [@room, @message], data: { turbo_stream: true }) do |form| %>
-  <%= render "messages/textarea" %>
-  <%= form.submit "Send", class: "w-full rounded-lg bg-slate-500 text-white"%>
+  <%= form_with(model: [@room, @message], data: { turbo_stream: true }) do |form| %>
+  <div class="flex gap-2 items-center items-stretch">
+    <%= render "messages/textarea" %>
+    <%= form.submit "Send", class: "p-4 rounded-lg bg-slate-500 text-white" %>
+  </div>
 <% end %>
diff --git a/app/views/messages/_textarea.html.erb b/app/views/messages/_textarea.html.erb
@@ -1,3 +1 @@
-<div id="message_content">
-  <textarea name="message[content]" id="message_content" class="mb-2" placeholder="your message..."></textarea>
-</div>
+<textarea name="message[content]" id="message_content" class="rounded-lg" placeholder="your message..."></textarea>
diff --git a/app/views/rooms/show.html.erb b/app/views/rooms/show.html.erb
@@ -2,7 +2,7 @@
   <h1 class="font-bold text-4xl mx-auto">
     <%= @room.name %>
   </h1>
-  <div id="messages" class="w-[25rem] mx-[5rem] flex flex-col gap-2 h-[10rem] overflow-y-auto flex-col-reverse">
+  <div id="messages" class="min-w-[20rem] py-2 mx-[5rem] flex flex-col gap-2 h-[15rem] overflow-y-auto flex-col-reverse">
     <%= render @messages%>
     <%= turbo_stream_from @room %>
   </div>