From 792d8832c633d207f4874475d8b878fcbc5b98da Mon Sep 17 00:00:00 2001
From: Hossein <hahmadia@users.noreply.github.com>
Date: Tue, 9 Nov 2021 15:26:45 -0500
Subject: [PATCH] Fix GH-1727: Board calculations: Dates are cut off (#1770)

* Fix GH-1727

* update snapshots

* fix snapshot
---
 .../src/components/__snapshots__/centerPanel.test.tsx.snap | 6 ++++++
 .../components/kanban/__snapshots__/kanban.test.tsx.snap   | 6 ++++++
 .../calculation/__snapshots__/calculation.test.tsx.snap    | 3 +++
 webapp/src/components/kanban/calculation/calculation.scss  | 7 +++++++
 webapp/src/components/kanban/calculation/calculation.tsx   | 1 +
 5 files changed, 23 insertions(+)

diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
index 36b57e296..3c5adddf2 100644
--- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
@@ -259,6 +259,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car
             class="KanbanCalculation"
           >
             <button
+              title="0"
               type="button"
             >
               <span>
@@ -312,6 +313,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car
             class="KanbanCalculation"
           >
             <button
+              title="2"
               type="button"
             >
               <span>
@@ -365,6 +367,7 @@ exports[`components/centerPanel return centerPanel and click on card to show car
             class="KanbanCalculation"
           >
             <button
+              title="0"
               type="button"
             >
               <span>
@@ -7278,6 +7281,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
             class="KanbanCalculation"
           >
             <button
+              title="0"
               type="button"
             >
               <span>
@@ -7331,6 +7335,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
             class="KanbanCalculation"
           >
             <button
+              title="1"
               type="button"
             >
               <span>
@@ -7384,6 +7389,7 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
             class="KanbanCalculation"
           >
             <button
+              title="0"
               type="button"
             >
               <span>
diff --git a/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap b/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
index ccbbf37ef..8bfe29ab7 100644
--- a/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
+++ b/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
           class="KanbanCalculation"
         >
           <button
+            title="2"
             type="button"
           >
             <span>
@@ -88,6 +89,7 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
           class="KanbanCalculation"
         >
           <button
+            title="1"
             type="button"
           >
             <span>
@@ -320,6 +322,7 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
           class="KanbanCalculation"
         >
           <button
+            title="2"
             type="button"
           >
             <span>
@@ -373,6 +376,7 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
           class="KanbanCalculation"
         >
           <button
+            title="1"
             type="button"
           >
             <span>
@@ -605,6 +609,7 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
           class="KanbanCalculation"
         >
           <button
+            title="2"
             type="button"
           >
             <span>
@@ -658,6 +663,7 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
           class="KanbanCalculation"
         >
           <button
+            title="1"
             type="button"
           >
             <span>
diff --git a/webapp/src/components/kanban/calculation/__snapshots__/calculation.test.tsx.snap b/webapp/src/components/kanban/calculation/__snapshots__/calculation.test.tsx.snap
index b96d99647..99cbe5395 100644
--- a/webapp/src/components/kanban/calculation/__snapshots__/calculation.test.tsx.snap
+++ b/webapp/src/components/kanban/calculation/__snapshots__/calculation.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`components/kanban/calculation/KanbanCalculation base case 1`] = `
   >
     <button
       class="Button"
+      title="3"
       type="button"
     >
       <span>
@@ -24,6 +25,7 @@ exports[`components/kanban/calculation/KanbanCalculation calculations menu open
   >
     <button
       class="Button"
+      title="3"
       type="button"
     >
       <span>
@@ -200,6 +202,7 @@ exports[`components/kanban/calculation/KanbanCalculation no menu should appear i
   >
     <button
       class="Button"
+      title="3"
       type="button"
     >
       <span>
diff --git a/webapp/src/components/kanban/calculation/calculation.scss b/webapp/src/components/kanban/calculation/calculation.scss
index d4aff9948..656d91044 100644
--- a/webapp/src/components/kanban/calculation/calculation.scss
+++ b/webapp/src/components/kanban/calculation/calculation.scss
@@ -7,6 +7,13 @@
         padding: 0 6px;
         min-width: 24px;
 
+        span {
+            max-width: 35px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         &:hover {
             background-color: rgba(var(--center-channel-color-rgb), 0.1);
         }
diff --git a/webapp/src/components/kanban/calculation/calculation.tsx b/webapp/src/components/kanban/calculation/calculation.tsx
index 6cffba3bc..2a08bfa64 100644
--- a/webapp/src/components/kanban/calculation/calculation.tsx
+++ b/webapp/src/components/kanban/calculation/calculation.tsx
@@ -32,6 +32,7 @@ function KanbanCalculation(props: Props): JSX.Element {
             <Button
                 onClick={() => (props.menuOpen ? props.onMenuClose : props.onMenuOpen)()}
                 onBlur={props.onMenuClose}
+                title={Calculations[props.value] ? Calculations[props.value](props.cards, props.property, intl) : ''}
             >
                 {Calculations[props.value] ? Calculations[props.value](props.cards, props.property, intl) : ''}
             </Button>