update style

components/message.vue

@@ -34,7 +34,7 @@
         <template v-if="showReadSummary && !isWithdrawMessage">
         <template v-if="showReadSummary && !isWithdrawMessage">
             <div v-if="isMyMessage" class="msg-read pos-rel">
             <div v-if="isMyMessage" class="msg-read pos-rel">
                 <span
                 <span
-                    @click="readListVisibility = true"
+                    @click="openReaderList"
                     class="pointer"
                     class="pointer"
                     :class="{ all: isAllRead }"
                     :class="{ all: isAllRead }"
                 >
                 >
@@ -48,6 +48,7 @@
                     v-if="readListVisibility"
                     v-if="readListVisibility"
                     @blur="readListVisibility = false"
                     @blur="readListVisibility = false"
                     :msgId="data.id"
                     :msgId="data.id"
+                    :class="{ offset: readerListOffset }"
                 />
                 />
             </div>
             </div>
         </template>
         </template>
@@ -62,7 +63,7 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <script lang="ts">
-import { Component, Inject, Mixins, Prop, Ref } from "vue-property-decorator";
+import { Component, Inject, Mixins, Prop } from "vue-property-decorator";
 
 
 import { Filters } from "../mixin/filter";
 import { Filters } from "../mixin/filter";
 import * as dto from "../model";
 import * as dto from "../model";
@@ -149,6 +150,8 @@ export default class Message extends Mixins(Filters) {
 
 
     private org = "";
     private org = "";
 
 
+    private readerListOffset = false;
+
     private get canWithdraw() {
     private get canWithdraw() {
         if (this.data) {
         if (this.data) {
             return new Date().valueOf() - this.data.ts * 1000 < twoMinutes;
             return new Date().valueOf() - this.data.ts * 1000 < twoMinutes;
@@ -273,6 +276,11 @@ export default class Message extends Mixins(Filters) {
                 });
                 });
         });
         });
     }
     }
+
+    private openReaderList(e: MouseEvent) {
+        this.readerListOffset = e.x < 450;
+        this.readListVisibility = true;
+    }
 }
 }
 </script>
 </script>
 
 

components/who-read-list.vue

@@ -176,6 +176,11 @@ export default class WhoReadList extends Vue {
     z-index: 2;
     z-index: 2;
     margin-left: -100px;
     margin-left: -100px;
     width: 125px;
     width: 125px;
+
+    &.offset {
+        margin-left: 0;
+    }
+
     .number-count {
     .number-count {
         font-size: 14px;
         font-size: 14px;
         color: #333333;
         color: #333333;