frontend ui enhacements

src/components/taInput/textDetails/text.vue

@@ -1,38 +1,52 @@
 <template>
-  <foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
+
+  <foreignObject 
+    class="inputContainer" 
+    :x="textXoffset" 
+    :y="textYoffset" 
+    width="55%" 
+    height="50%"
+  >
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <div class="inputBubble" contenteditable v-show="input.length > 0" font-family="SF Pro">
+      <div class="inputBubble" v-show="input.length > 0">
         <p>{{ input }}</p>
       </div>
     </div>
+
   </foreignObject>
+
 </template>
 
 <script lang="ts">
+
 import { defineComponent } from "vue";
+
 export default defineComponent({
+
   name: "TextInput",
   props: {
     input: String,
     textXoffset: String,
+    textYoffset: String,
   },
 });
+
 </script>
 
 <style lang="scss" scoped>
-div[contenteditable] {
-  width: auto;
+.inputBubble {
+
   max-width: 180px;
-  height: auto;
-  min-height: 36px;
+  min-height: 32px;
+
   display: table;
   justify-items: center;
-  border: 0;
+
   border-radius: 10px;
-  color: #000;
-  background-color: #b9b9b9;
-  font-size: 14;
-  text-align: left;
+  background-color: #B9B9B9;
+
+  font-size: 14px;
+
   p {
     max-width: 150px;
     overflow-wrap: break-word;