issue3969修正

traPtitech · Nov 9, 2023 · 96d5298 · 96d5298
1 parent bea3a2b
commit 96d5298
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue b/src/components/Main/MainView/MessageInput/MessageInputTypingUsers.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="typing-users">
-    <div v-if="typingUsers.length > 0" :class="$style.container">
+    <div v-if="typingUsers.length > 0" :class="$style.container" :data-is-mobile="$boolAttr(isMobile)">
       <message-input-typing-animation />
       <div :class="$style.text">
         {{ text }}
@@ -21,13 +21,16 @@
 <script lang="ts" setup>
 import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
 import MessageInputTypingAnimation from './MessageInputTypingAnimation.vue'
+import { useResponsiveStore } from '/@/store/ui/responsive'
 import { computed } from 'vue'
 import type { UserId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   typingUsers: readonly UserId[]
 }>()
 
+const { isMobile } = useResponsiveStore()
+
 const text = computed(
   () =>
     `${props.typingUsers.length > 3 ? 'and others' : ''} ${
@@ -40,11 +43,15 @@ const text = computed(
 .container {
   position: absolute;
   top: -4px;
-  left: 0;
+  left: 16px;
   transform: translateY(-100%);
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
+
+  &:not([data-is-mobile]){
+    left: 0px;
+  }
 }
 
 .text {