From 02d9f4ec907e47631661c6b402003f3e9b1981bf Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Tue, 15 Apr 2025 10:08:41 +0800
Subject: [PATCH] update: BoardMessage style fix: timezone

---
 src/components/Board/BoardMessage.vue | 29 ++++++++++++++-------------
 src/views/BoardView.vue               |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/Board/BoardMessage.vue b/src/components/Board/BoardMessage.vue
index c9f0441..86cbde7 100644
--- a/src/components/Board/BoardMessage.vue
+++ b/src/components/Board/BoardMessage.vue
@@ -25,30 +25,31 @@ const avatarUrl = computed(() => {
     </div>
     <div class="content">
       <div class="bubble">
-        <div class="ts-grid">
-          <div class="column is-fluid">
-            <div class="author">{{ message.username }}</div>
-            <div class="text">{{ message.message }}</div>
-            <div class="meta">
-              <div class="item">{{ new Date(message.timestamp).toLocaleString('zh-TW', {timeZone: "-08:00"}) }}</div>
-            </div>
-          </div>
-          <div class="column" v-if="userId === message.userId">
-            <button class="ts-button is-icon is-negative is-outlined" @click="onDelete">
-              <span class="ts-icon is-trash-icon"></span>
-            </button>
-          </div>
+        <div class="author">{{ message.username }}</div>
+        <div class="text">{{ message.message }}</div>
+        <div class="meta">
+          <div class="item">{{ new Date(message.timestamp + "+00:00").toLocaleString('zh-TW', {timeZone: "Asia/Taipei"}) }}</div>
         </div>
       </div>
+      <div class="has-top-spaced-small is-end" v-if="userId === message.userId">
+        <button class="ts-chip is-start-icon" @click="onDelete">
+          <span class="ts-icon is-trash-icon"></span>刪除
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.ts-conversation > .content {
+.ts-conversation {
   width: 100%;
 }
 
+.ts-conversation > .content {
+  flex: 1;
+  overflow: hidden;
+}
+
 .ts-conversation .bubble .text {
   white-space: pre-line;
   word-wrap: break-word;
diff --git a/src/views/BoardView.vue b/src/views/BoardView.vue
index 35a42ab..f6edbef 100644
--- a/src/views/BoardView.vue
+++ b/src/views/BoardView.vue
@@ -48,7 +48,7 @@ const onDelete = async (messageId) => {
   <div class="ts-container">
     <BoardForm :locked="!isLoggedIn" @new-message="onSubmit" />
     <div class="ts-content is-horizontally-fitted is-vertically-padded">
-      <div class="ts-wrap is-vertical">
+      <div class="ts-wrap is-vertical" style="width: 100%;">
         <BoardMessage :message="message" v-for="message in messages" :key="message.id" @delete-message="onDelete(message.id)" />
       </div>
     </div>