From 6481872de2c38388cdcfc7be901bad5fece46c12 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 10 Aug 2021 15:27:24 +0300
Subject: [PATCH] Fix border EditBox and calculate width (#17)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/ui/src/components/EditBox.svelte | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index 5613261bd1..d87a4dd337 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -32,7 +32,7 @@
     const target = t as HTMLInputElement
     const value = target.value
     text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;')
-    target.style.width = text.clientWidth + 6 + 'px'
+    target.style.width = text.clientWidth + 8 + 'px'
   }
 
   onMount(() => {
@@ -58,16 +58,19 @@
 
 <style lang="scss">
 
-  .text {
-    position: absolute;
-    visibility: hidden;
-  }
   .editbox {
     display: flex;
     flex-direction: column;
     min-width: 50px;
     height: auto;
 
+    .text {
+      position: absolute;
+      visibility: hidden;
+      overflow: hidden;
+      white-space: pre-wrap;
+    }
+
     .label {
       margin-bottom: 4px;
       font-size: 12px;
@@ -81,14 +84,13 @@
     input {
       max-width: 100%;
       height: 21px;
-      margin: -3px;
+      margin: -4px;
       padding: 2px;
       font-family: inherit;
-      font-size: 14px;
-      line-height: 150%;
+      font-size: inherit;
       color: var(--theme-caption-color);
       background-color: transparent;
-      border: 1px solid transparent;
+      border: 2px solid transparent;
       border-radius: 2px;
       outline: none;