From bfddc335bce208d39d87c4b42cc443996810c76d Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Wed, 12 Jan 2022 21:35:02 +0500
Subject: [PATCH] GH-2101 - Fixing card property and value bugs (#2103)

---
 .../__snapshots__/workspace.test.tsx.snap     | 24 +++++++++----------
 .../src/components/cardDetail/cardDetail.scss | 16 +++++++++----
 .../cardDetail/cardDetailProperties.tsx       |  2 +-
 .../__snapshots__/galleryCard.test.tsx.snap   |  2 +-
 .../__snapshots__/kanbanCard.test.tsx.snap    | 10 ++++----
 .../src/components/propertyValueElement.tsx   |  2 +-
 6 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/webapp/src/components/__snapshots__/workspace.test.tsx.snap b/webapp/src/components/__snapshots__/workspace.test.tsx.snap
index 57b992771..45906de85 100644
--- a/webapp/src/components/__snapshots__/workspace.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/workspace.test.tsx.snap
@@ -671,7 +671,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -715,7 +715,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -759,7 +759,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -1059,7 +1059,7 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -1089,7 +1089,7 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -1119,7 +1119,7 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -1830,7 +1830,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -1874,7 +1874,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -1918,7 +1918,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -2218,7 +2218,7 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -2248,7 +2248,7 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
@@ -2278,7 +2278,7 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
                   data-tooltip="Property 1"
                 >
                   <div
-                    class="octo-propertyvalue"
+                    class="octo-propertyvalue octo-propertyvalue--readonly"
                   >
                     value1
                   </div>
diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
index 1f4c88f80..250106668 100644
--- a/webapp/src/components/cardDetail/cardDetail.scss
+++ b/webapp/src/components/cardDetail/cardDetail.scss
@@ -57,9 +57,12 @@
             font-size: 14px;
             padding: 4px 8px;
             height: 32px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+
+            &.octo-propertyvalue--readonly {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
 
             &:not(.readonly) {
                 min-width: 180px;
@@ -93,8 +96,13 @@
         }
     }
 
+    .octo-propertyrow {
+        .octo-propertyname {
+            flex: 0 0 150px;
+        }
+    }
+
     .octo-propertyname {
-        flex: 0 0 150px;
         width: 150px;
         margin-right: 5px;
         color: rgba(var(--center-channel-color-rgb), 0.6);
diff --git a/webapp/src/components/cardDetail/cardDetailProperties.tsx b/webapp/src/components/cardDetail/cardDetailProperties.tsx
index b585707f7..f21f2af69 100644
--- a/webapp/src/components/cardDetail/cardDetailProperties.tsx
+++ b/webapp/src/components/cardDetail/cardDetailProperties.tsx
@@ -141,7 +141,7 @@ const CardDetailProperties = React.memo((props: Props) => {
                         key={propertyTemplate.id + '-' + propertyTemplate.type + '-' + propertyValue}
                         className='octo-propertyrow'
                     >
-                        {props.readonly && <div className='octo-propertyname'>{propertyTemplate.name}</div>}
+                        {props.readonly && <div className='octo-propertyname octo-propertyname--readonly'>{propertyTemplate.name}</div>}
                         {!props.readonly &&
                             <MenuWrapper isOpen={propertyTemplate.id === newTemplateId}>
                                 <div className='octo-propertyname'><Button>{propertyTemplate.name}</Button></div>
diff --git a/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap b/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap
index a2e7fff9e..8c1718f4b 100644
--- a/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap
+++ b/webapp/src/components/gallery/__snapshots__/galleryCard.test.tsx.snap
@@ -871,7 +871,7 @@ exports[`src/components/gallery/GalleryCard without block content should match s
         data-tooltip="testTemplateProperty"
       >
         <div
-          class="octo-propertyvalue"
+          class="octo-propertyvalue octo-propertyvalue--readonly"
         />
       </div>
     </div>
diff --git a/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap b/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
index bfab09af3..57b6bb6af 100644
--- a/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
+++ b/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
@@ -127,7 +127,7 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
       data-tooltip="name"
     >
       <div
-        class="octo-propertyvalue"
+        class="octo-propertyvalue octo-propertyvalue--readonly"
       />
     </div>
   </div>
@@ -261,7 +261,7 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
       data-tooltip="name"
     >
       <div
-        class="octo-propertyvalue"
+        class="octo-propertyvalue octo-propertyvalue--readonly"
       />
     </div>
   </div>
@@ -395,7 +395,7 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
       data-tooltip="name"
     >
       <div
-        class="octo-propertyvalue"
+        class="octo-propertyvalue octo-propertyvalue--readonly"
       />
     </div>
   </div>
@@ -442,7 +442,7 @@ exports[`src/components/kanban/kanbanCard should match snapshot 1`] = `
       data-tooltip="name"
     >
       <div
-        class="octo-propertyvalue"
+        class="octo-propertyvalue octo-propertyvalue--readonly"
       />
     </div>
   </div>
@@ -475,7 +475,7 @@ exports[`src/components/kanban/kanbanCard should match snapshot with readonly 1`
       data-tooltip="name"
     >
       <div
-        class="octo-propertyvalue"
+        class="octo-propertyvalue octo-propertyvalue--readonly"
       />
     </div>
   </div>
diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index b5c2ef4fc..0f49e7da3 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -242,7 +242,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
                 />
             )
         }
-        return <div className='octo-propertyvalue'>{displayValue}</div>
+        return <div className='octo-propertyvalue octo-propertyvalue--readonly'>{displayValue}</div>
     }
     return <div className='octo-propertyvalue'>{finalDisplayValue}</div>
 }