Tweaking post UI

src/views/messages/Message.vue

@@ -1,33 +1,34 @@
 <template>
-  <div class="flex flex-column">
-    <div class="flex flex-row p-1 items-center">
-      <div class="px-2 content-center">
-        <img :src="message.createdByPortraitUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
-             alt="Profile Image"
-             class="rounded-full"
-             width="32px"
-             height="32px">
-      </div>
-
-      <div class="p-2 flex-1">
+  <div class="flex flex-column py-2 ">
+    <div class="flex flex-row full ">
+      <div  class="w-full">
         <div class="flex justify-between items-center">
-
           <div>
-             
-            <span class="font-semibold font-sans mr-2">
+            <div>
+              <div class=" content-center flex flex-row">
+                <img
+                    :src="message.createdByPortraitUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                    alt="Profile Image"
+                    class="rounded-full"
+                    width="32px"
+                    height="32px">
+                <span class="font-semibold font-sans mr-2 capitalize ml-2">
               {{ message.createdByName }}
             </span>
 
-            <v-tooltip :text="new Date(message.createdAt).toLocaleString()">
-              <template v-slot:activator="{ props }">
-                <span v-bind="props" class="text-sm-caption text-gray-700">
+                <v-tooltip :text="new Date(message.createdAt).toLocaleString()">
+                  <template v-slot:activator="{ props }">
+                <span v-bind="props" class="text-sm-caption text-gray-700 mt-1">
                   {{ time_ago(message.createdAt) }}
                 </span>
-              </template>
-            </v-tooltip>
+                  </template>
+                </v-tooltip>                              
+              </div>
+            </div>
+
 
           </div>
-          <v-menu>
+          <v-menu class="ml-auto">
             <template v-slot:activator="{ props }">
               <v-btn variant="plain" icon v-bind="props">
                 <v-icon>mdi-dots-vertical</v-icon>
@@ -47,8 +48,9 @@
           </v-menu>
         </div>
 
-        <div class="font-sans">
-          {{ message.value }}
+        <div class="font-sans message-content">
+          <p class=" pb-2"> {{ message.value }}</p>
+
         </div>
       </div>
     </div>
@@ -60,7 +62,6 @@
 import {time_ago} from "@/internal_time_ago.js";
 
 
-
 const props = defineProps({
   message: {
     type: Object,
@@ -90,4 +91,9 @@ function reportMessage(message) {
   display: flex;
   align-items: center;
 }
+
+.message-content {
+  word-wrap: break-word;
+  word-break: break-word;
+}
 </style>

src/views/messages/MessageList.vue

@@ -3,18 +3,18 @@
   <v-infinite-scroll :items="messages"
                      :onLoad="load"
                      mode="manual"
-                     class="bg-gray-300 rounded-md justify-items-center">
+                     class="justify-items-center">
 
     <template v-for="(message, index) in messages" :key="index">
       <message :message="message"
-               class="m-2 p-2 rounded-md bg-gray-100"
+               class="border-b"
       ></message>
     </template>
 
     <template v-slot:load-more="{ props }">
       <v-btn
           size="small"
-          variant="plain"
+          variant="outlined"
           v-bind="props"
       >Voir plus de commentaires
       </v-btn>

src/views/messages/PostMessage.vue

@@ -1,16 +1,42 @@
 <template>
   <div class="flex flex-column">
-    <div class="flex flex-row">
-      <div class="mx-2 content-center">
-        <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full" width="32px" height="32px">
+    <div class="flex flex-row items-center ">
+      <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
+      <div class="flex-grow">
+        <div class="flex flex-row bg-gray-100 rounded-2xl">
+          <v-textarea
+              v-model="value"
+              density="compact"
+              variant="underlined"
+              placeholder="Votre commentaire..."
+              hide-details
+              auto-grow
+              rows="1"
+              maxlength="1024"
+              class="pr-1 ml-6 flex-grow"
+              @keydown.enter.prevent="publish"
+              
+          >
+          </v-textarea>
+          <div class="flex flex-col justify-center">
+            <v-btn
+                icon
+                variant="text"
+                @click="publish"
+            >
+              <v-icon>mdi-send</v-icon>
+            </v-btn>
+          </div>
+        </div>
       </div>
-      <v-text-field v-model="value" density="compact" variant="solo-inverted" placeholder="Votre commentaire..." hide-details clearable></v-text-field>
     </div>
-    <div class="flex flex-row gap-2 mt-2 justify-end">
-      <v-btn variant="plain">Annuler</v-btn>
-      <v-btn variant="tonal" @click="publish">Commenter</v-btn>
+    <div class="flex justify-end items-center mt-1">
+      <div v-if="value.length < 1024" class="text-gray-500 text-sm">{{ value.length }}/1024</div>
+      <div v-if="value.length >= 1024" class="text-red-500 text-sm">{{ value.length }}/1024</div>
     </div>
   </div>
+
+
   <v-dialog v-model="loginModal" max-width="400">
     <v-card>
       <div class="flex flex-col items-center">
@@ -90,3 +116,21 @@ const handleFailure = () => {
   console.error('Login failed');
 }
 </script>
+
+<style scoped>
+.text-red-500 {
+  color: #f56565;
+}
+
+.text-gray-500 {
+  color: #a0aec0;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+</style>