Format CommitHistory and fix overflow on chat

nginx/vue/src/components/util/Chat.vue

@@ -81,8 +81,8 @@ onUnmounted(() => {
 <template>
   <div class="flex-col flex">
     <Header>Chat</Header>
-    <div ref="messagesContainer" class="flex flex-col overflow-y-auto p-2">
+    <div ref="messagesContainer" class="flex flex-col overflow-y-auto overflow-x-hidden p-2 min-w-0">
-      <p v-for="message in messages" :key="message.id">
+      <p v-for="message in messages" :key="message.id" class="break-words min-w-0 w-full">
         <span class="text-tertiary">{{ message.authorId }}:</span>
         <template
           v-for="(part, i) in parseMessageParts(message.text || '')"
@@ -93,7 +93,7 @@ onUnmounted(() => {
             :href="part.value"
             target="_blank"
             rel="noopener noreferrer"
-            class="text-primary underline"
+            class="text-primary underline break-all"
             >{{ part.value }}</a
           >
           <span v-else>{{ part.value }}</span>
@@ -102,17 +102,17 @@ onUnmounted(() => {
           <img
             v-if="isImageUrl(message.fileUrl)"
             :src="message.fileUrl"
-            class="w-full max-h-48 rounded"
+            class="w-full max-w-full max-h-48 rounded block"
             @load="scrollToBottom"
           />
           <video
             v-else-if="isVideoUrl(message.fileUrl)"
             :src="message.fileUrl"
             controls
-            class="w-full max-h-48 rounded"
+            class="w-full max-w-full max-h-48 rounded block"
             @loadedmetadata="scrollToBottom"
           />
-          <a v-else :href="message.fileUrl" target="_blank" class="underline">{{
+          <a v-else :href="message.fileUrl" target="_blank" class="underline break-all">{{
             message.fileUrl.split("/").pop()
           }}</a>
         </template>

nginx/vue/src/components/util/CommitHistory.vue

@@ -8,33 +8,26 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
 </script>
 
 <template>
-    <div class="flex flex-col text-center h-full">
+  <div class="flex flex-col text-center h-full">
-        <Header class="text-left">Commits</Header>
+    <Header class="text-left">Commits</Header>
 
-        <div v-if="!loaded" class="flex-1 overflow-y-auto">
+    <div v-if="!loaded" class="flex-1 overflow-y-auto">
-            <p>Loading latest activity...</p>
+      <p>Loading latest activity...</p>
-        </div>
-
-        <div
-            v-else-if="feed"
-            class="flex-1 flex flex-col justify-center overflow-y-auto"
-        >
-            <h3>Last git activity</h3>
-            <img
-                :src="feed.avatarUrl"
-                alt="User avatar"
-                class="avatar"
-            />
-            <a :href="feed.repoUrl">
-                <h3>repo: {{ feed.repoName }}</h3>
-            </a>
-            <p>Action: {{ feed.opType }}</p>
-            <p>Message: {{ feed.commitMessage }}</p>
-            <small> {{ new Date(feed.createdAt).toLocaleString() }}</small>
-        </div>
-
-        <div v-else class="flex-1 overflow-y-auto">
-            <p>No activity found.</p>
-        </div>
     </div>
+
+    <div v-else-if="feed" class="flex-1 flex flex-col overflow-y-auto">
+      <h3>Last git activity</h3>
+      <img :src="feed.avatarUrl" alt="User avatar" class="avatar" />
+      <a :href="feed.repoUrl">
+        <h3>repo: {{ feed.repoName }}</h3>
+      </a>
+      <p>Action: {{ feed.opType }}</p>
+      <p>Message: {{ feed.commitMessage }}</p>
+      <small> {{ new Date(feed.createdAt).toLocaleString() }}</small>
+    </div>
+
+    <div v-else class="flex-1 overflow-y-auto">
+      <p>No activity found.</p>
+    </div>
+  </div>
 </template>