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

@@ -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 {

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>
     )

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;
     }