From 1a747b780e9d6f4bb24126f90c4027b6c93a991f Mon Sep 17 00:00:00 2001
From: kamre <eremchenko@gmail.com>
Date: Mon, 4 Oct 2021 11:35:39 +0700
Subject: [PATCH] Fix displaying properties on kanban cards: (#1400)

- hide URL property only when it is empty
  - hide empty labels for Select/MultiSelect properties
---
 webapp/src/components/kanban/kanbanCard.scss   | 12 +++++++-----
 webapp/src/components/properties/link/link.tsx |  6 ++++--
 webapp/src/widgets/label.scss                  |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/kanban/kanbanCard.scss b/webapp/src/components/kanban/kanbanCard.scss
index d387991b0..f7e1c35c0 100644
--- a/webapp/src/components/kanban/kanbanCard.scss
+++ b/webapp/src/components/kanban/kanbanCard.scss
@@ -41,13 +41,15 @@
     }
 
     .octo-propertyvalue {
-        margin: 4px 0 0;
-        font-size: 12px;
-        line-height: 18px;
-
-        &:empty {
+        input[value=''] {
             display: none;
         }
+
+        .Label.empty {
+            display: block;
+            padding: 0;
+            margin: 0;
+        }
     }
 
     .octo-icontitle {
diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx
index fb00e4441..5a3f6b59d 100644
--- a/webapp/src/components/properties/link/link.tsx
+++ b/webapp/src/components/properties/link/link.tsx
@@ -21,7 +21,8 @@ type Props = {
 
 const URLProperty = (props: Props): JSX.Element => {
     let link: ReactNode = null
-    if (props.value?.trim()) {
+    const hasValue = Boolean(props.value?.trim())
+    if (hasValue) {
         link = (
             <a
                 className='Link__button'
@@ -37,6 +38,7 @@ const URLProperty = (props: Props): JSX.Element => {
 
     return (
         <div className='URLProperty property-link url'>
+            {(hasValue || props.placeholder) &&
             <Editable
                 className='octo-propertyvalue'
                 placeholderText={props.placeholder}
@@ -47,7 +49,7 @@ const URLProperty = (props: Props): JSX.Element => {
                 onSave={props.onSave}
                 onCancel={props.onCancel}
                 validator={props.validator}
-            />
+            />}
             {link}
         </div>
     )
diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss
index 363af5f16..c665f6891 100644
--- a/webapp/src/widgets/label.scss
+++ b/webapp/src/widgets/label.scss
@@ -14,7 +14,7 @@
 
     &.empty {
         color: rgba(var(--center-channel-color-rgb), 0.4);
-        padding: 3px;
+        padding: 1px;
         text-transform: none;
         font-weight: normal;
     }