update: BoardMessage style

fix: timezone

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="author">{{ message.username }}</div>
-          <div class="column is-fluid">
+        <div class="text">{{ message.message }}</div>
-            <div class="author">{{ message.username }}</div>
+        <div class="meta">
-            <div class="text">{{ message.message }}</div>
+          <div class="item">{{ new Date(message.timestamp + "+00:00").toLocaleString('zh-TW', {timeZone: "Asia/Taipei"}) }}</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>
       </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;

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>