input

src/components/taInput/index.vue

@@ -9,9 +9,7 @@
 
   <TextInput 
     v-else 
-    :input="input" 
-    :textXoffset="textInputXoffset"
-    :textYoffset="textInputYoffset"
+    :input="input"
   />
 
 </template>
@@ -40,19 +38,12 @@ export default defineComponent({
     const {
       input,
       visualizeStream,
-
-      textInputXoffset,
-      textInputYoffset,
-
       audioBubbleWidth,
       paths,
     } = useInputController();
 
     return {
       input,
-      
-      textInputXoffset,
-      textInputYoffset,
 
       visualizeStream,
       audioBubbleWidth,

src/components/taInput/inputController.ts

@@ -96,8 +96,6 @@ export default function useInputController() {
     return {
         input,
         visualizeStream,
-        textInputXoffset,
-        textInputYoffset,
         audioBubbleWidth,
         paths
     }

src/components/taInput/textDetails/text.vue

@@ -1,20 +1,11 @@
 <template>
 
-  <foreignObject 
-    class="inputContainer" 
-    :x="textXoffset" 
-    :y="textYoffset" 
-    width="55%" 
-    height="50%"
-  >
-    <div xmlns="http://www.w3.org/1999/xhtml">
+    <div class="inputBox">
       <div class="inputBubble" v-show="input.length > 0">
         <p>{{ input }}</p>
       </div>
     </div>
 
-  </foreignObject>
-
 </template>
 
 <script lang="ts">
@@ -26,17 +17,28 @@ export default defineComponent({
   name: "TextInput",
   props: {
     input: String,
-    textXoffset: String,
-    textYoffset: String,
   },
 });
 
 </script>
 
 <style lang="scss" scoped>
-.inputBubble {
+
+.inputBox {
   position: fixed;
 
+  width: 100vw;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  bottom: 0;
+
+  z-index: 1;
+}
+
+.inputBubble {
   max-width: 180px;
   min-height: 32px;
 
@@ -48,14 +50,15 @@ export default defineComponent({
 
   font-size: 14px;
 
-  bottom: 20px;
-  margin-left: 50%;
-
   p {
     max-width: 150px;
     overflow-wrap: break-word;
     padding: 7px 10px 5px 10px;
     margin: 0;
   }
+
+  margin-bottom: 20px;
+
+  z-index: 1;
 }
 </style>