right css for dms

pkg/arvo/neo/cod/std/src/lib/messages.hoon

@@ -13,13 +13,17 @@
   ;style
   ;+  ;/  %-  trip
   '''
-   .fe {
+  .fe {
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: flex-end
     }
+  .msg{
+    max-width: 70%;
+    min-width: 40%;
+  }
   '''
   ==
 ::::
@@ -36,9 +40,10 @@
 ++  render-messages
   |=  =bowl:neo
   ^-  manx
-  ;div.fc.g2
+  ;div.fc.g2.p1
     =label  "Messages"
-    ;*
+    =id  "messages"
+  ;*
     %+  turn
       %+  sort
         %+  murn
@@ -51,31 +56,55 @@
       =/  adate  +:(snag 1 pith.a)
       =/  bdate  +:(snag 1 pith.b)
       (lth adate bdate)
-    render-message
+    |=  [pax=pith =idea:neo]
+    (render-message pax idea bowl)
   ==
 ::
 ++  render-message
-  |=  [pax=pith =idea:neo]
+  |=  [pax=pith =idea:neo =bowl:neo]
   =/  msg  !<(message q.pail.idea)
   ~&  >  msg
   ^-  manx
-  ;div.fc.g2.border.p3.br1
+  ?:  =(our.bowl from.msg)
+    (render-our-message msg)
+  ::;div.fc.g2.border.p3.br1.grow.msg
+  ;div.fc.g2.grow.msg
+    =style  "align-self: flex-start;"
     ;div.fr.ac.jb
       ;p.s-2.f3: {(scow %p from.msg)}
       ;p.s-2.f3: {(scow %da now.msg)}
     ==
-    ;p: {(trip contents.msg)}
+    ;div.border.br1.p3
+      ;p: {(trip contents.msg)}
+    ==
   ==
 ::
+++  render-our-message
+|=  msg=message
+;div.fc.g2.grow.msg
+=style  "align-self: flex-end;"
+  ;div.fr.ac.jb
+    ;p.s-2.f3: {(scow %p from.msg)}
+    ;p.s-2.f3: {(scow %da now.msg)}
+  ==
+  ;div.fr.je.border.br1.b1.p3
+  ;p:  {(trip contents.msg)}
+  ==
+==
+::
 ++  render-sender
   |=  [=bowl:neo location=pith]
-  ~&  >  "/neo/hawk{(pith-tape (welp here.bowl location))}?stud=message"
+  :: =-  
+  :: =/  that  -
+  ::   ?~  location  
+  ::     that(a.g [[%hx-post "/neo/hawk{(pith-tape here.bowl)}?stud=groupchat-diff"] [%head "post-to-host"] a.g.that])
+  ::   that(a.g [[%hx-post "/neo/hawk{(pith-tape (welp here.bowl location))}?stud=message"] [%head "msg"] a.g.that])
   ^-  manx
   ;form.fc.g2.wf
     =hx-post  "/neo/hawk{(pith-tape (welp here.bowl location))}?stud=message"
-    =hx-swap  "none"  ::"outerHTML swap:5s"
+    =hx-swap  "beforeend swap:1s"
     =hx-on-submit  "this.reset()"
-    =hx-target  "find button .loading"
+    =hx-target  "previous #messages"
     =head  "msg"
     =id  "render-sender"
     ;textarea.p2.border.br1
@@ -85,6 +114,7 @@
       =rows  "4"
       =required  ""
       =autocomplete  "off"
+      =maxlength  "2048"
       ;
     ==
     ;input.hidden
@@ -98,7 +128,7 @@
     ;
     ==
     ;button.p2.b1.br1.bd1.wfc.hover.loader
-      ;span.loaded.s2:  create
+      ;span.loaded.s2:  send
       ;span.loading
         ;+  loading.feather-icons
       ==