inputItem movement

src/components/helpers.ts

@@ -16,13 +16,13 @@ export function calcPosition (inputItemPosition: number, percent: number,
     short: number, win: number) {
 
     // Is it close to the right/left side?
-    if (percent > 0.85) { 
+    if (percent > 0.75) { 
         inputItemPosition = win - short
     }
 
     // Is it not close to a side?
-    if (percent < 0.85 && percent > 0.15) {
-        inputItemPosition = inputItemPosition / win
+    if (percent < 0.75 && percent > 0.25) {
+        inputItemPosition = win * percent
     }
 
     return inputItemPosition

src/components/inputItem.vue

@@ -50,13 +50,13 @@ export default defineComponent({
 
     // Update position references when user is done moving inputItem.
     const onMouseUp = (e: any) => {
-      window.removeEventListener('mousemove');
+      window.removeEventListener('mousemove', onMouseMove, true);
 
       const winW = window.innerWidth
       const winH = window.innerHeight
       
       xShort = calcSideProximity(inputItemX.value, winW)
-      yShort = calcSideProximity(inputItemX.value, winW)
+      yShort = calcSideProximity(inputItemY.value, winH)
 
       percentX = inputItemX.value / winW
       percentY = inputItemY.value / winH

src/views/messenger.vue

@@ -1,8 +1,8 @@
 <template>
 
     <TextAudioInput />
-<!--     <InputItem />
- -->
+    <InputItem />
+
     <!-- List of message bubbles. -->
     <div id="messenger">
       <MessageItem v-for="message in messages" :message="message" :key="message.id"/>
@@ -16,7 +16,7 @@ import { defineComponent, reactive, onMounted, ref, onUnmounted } from "vue";
 import TextAudioInput from "@/components/taInput/index.vue";
 import { Message } from "@/types/message/index";
 import MessageItem from '@/components/messageItem.vue'
-// import InputItem from "@/components/inputItem.vue";
+import InputItem from "@/components/inputItem.vue";
 
 export default defineComponent({
   name: "Messenger",
@@ -24,7 +24,7 @@ export default defineComponent({
   components: {
     TextAudioInput,
     MessageItem,
-    // InputItem
+    InputItem
   },
 
   setup() {
@@ -72,8 +72,6 @@ export default defineComponent({
 
     overflow-y: scroll;
 
-    background-color: #EBEBEB;
-
     bottom: 0;
 
   }