From e83b05b661c48aa79ccd90f92d9daa56c53f0f26 Mon Sep 17 00:00:00 2001
From: Muhammad Redho Ayassa <redhoyasa@gmail.com>
Date: Tue, 8 Nov 2022 23:37:06 +0700
Subject: [PATCH] Fix not filling cell (#4099)

* fix(editable): make autoExpand stretch to parent width

* fix(editable): adjust snapshot against the new editable

* fill URLProperty to parent width

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
---
 .../__snapshots__/propertyValueElement.test.tsx.snap  |  4 ++--
 .../__snapshots__/cardDetailProperties.test.tsx.snap  |  6 +++---
 .../properties/url/__snapshots__/url.test.tsx.snap    |  2 +-
 webapp/src/properties/url/url.scss                    |  1 +
 webapp/src/widgets/editable.tsx                       | 11 +----------
 5 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
index 21f9a79c9..77c4665d7 100644
--- a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/propertyValueElement Generic fields should allow cancel 1`]
     class="Editable octo-propertyvalue"
     placeholder="Empty"
     spellcheck="true"
-    style="width: 5px;"
+    style="width: 100%;"
     title=""
     value=""
   />
@@ -94,7 +94,7 @@ exports[`components/propertyValueElement should match snapshot, person, array va
     class="Editable octo-propertyvalue"
     placeholder="Empty"
     spellcheck="true"
-    style="width: 5px;"
+    style="width: 100%;"
     title=""
     value=""
   />
diff --git a/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
index 2373ee002..201944340 100644
--- a/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
+++ b/webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`components/cardDetail/CardDetailProperties cancel on delete dialog shou
       <input
         class="Editable octo-propertyvalue"
         placeholder="Empty"
-        style="width: 5px;"
+        style="width: 100%;"
         title="1234"
         value="1234"
       />
@@ -159,7 +159,7 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
       <input
         class="Editable octo-propertyvalue"
         placeholder="Empty"
-        style="width: 5px;"
+        style="width: 100%;"
         title="1234"
         value="1234"
       />
@@ -252,7 +252,7 @@ exports[`components/cardDetail/CardDetailProperties should show property types m
       <input
         class="Editable octo-propertyvalue"
         placeholder="Empty"
-        style="width: 5px;"
+        style="width: 100%;"
         title="1234"
         value="1234"
       />
diff --git a/webapp/src/properties/url/__snapshots__/url.test.tsx.snap b/webapp/src/properties/url/__snapshots__/url.test.tsx.snap
index 036176dfb..141f1c141 100644
--- a/webapp/src/properties/url/__snapshots__/url.test.tsx.snap
+++ b/webapp/src/properties/url/__snapshots__/url.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`properties/link should match snapshot for link with empty url 1`] = `
     <input
       class="Editable octo-propertyvalue"
       placeholder=""
-      style="width: 5px;"
+      style="width: 100%;"
       title=""
       value=""
     />
diff --git a/webapp/src/properties/url/url.scss b/webapp/src/properties/url/url.scss
index 50ce25b3c..b3c0d4d9d 100644
--- a/webapp/src/properties/url/url.scss
+++ b/webapp/src/properties/url/url.scss
@@ -2,6 +2,7 @@
     display: flex;
     align-items: center;
     overflow: hidden;
+    width: 100%;
 
     .link {
         flex: 1 1 auto;
diff --git a/webapp/src/widgets/editable.tsx b/webapp/src/widgets/editable.tsx
index 4760b859b..ebbc91be5 100644
--- a/webapp/src/widgets/editable.tsx
+++ b/webapp/src/widgets/editable.tsx
@@ -116,13 +116,6 @@ export function useEditable(
     }
 }
 
-function borderWidth(style: CSSStyleDeclaration): number {
-    return (
-        parseInt(style.borderLeftWidth || '0', 10) +
-        parseInt(style.borderRightWidth || '0', 10)
-    )
-}
-
 const Editable = (props: EditableProps, ref: React.Ref<Focusable>): JSX.Element => {
     const elementRef = useRef<HTMLInputElement>(null)
     const elementProps = useEditable(props, ref, elementRef)
@@ -130,9 +123,7 @@ const Editable = (props: EditableProps, ref: React.Ref<Focusable>): JSX.Element
     useLayoutEffect(() => {
         if (props.autoExpand && elementRef.current) {
             const input = elementRef.current
-            const computed = getComputedStyle(input)
-            input.style.width = 'auto'
-            input.style.width = `${input.scrollWidth + borderWidth(computed) + 1}px`
+            input.style.width = '100%'
         }
     })