From e092abb45f982a038fa4aece7aed7ac19e529a5a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 16 Dec 2022 10:25:37 +0500
Subject: [PATCH] Calculation row padding fix (#4338)

* Calculation row padding fix

* Updating table UI
---
 .../__snapshots__/centerPanel.test.tsx.snap          |  6 ++++++
 .../table/__snapshots__/table.test.tsx.snap          | 12 ++++++++++++
 .../table/__snapshots__/tableRow.test.tsx.snap       |  3 +++
 .../components/table/calculation/calculationRow.scss |  1 +
 webapp/src/components/table/table.scss               |  6 ------
 webapp/src/components/table/tableRow.scss            |  1 +
 webapp/src/components/table/tableRow.tsx             |  8 ++++----
 7 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
index 2cd510c16..49bf19dea 100644
--- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
@@ -2177,6 +2177,9 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
               draggable="true"
               style="opacity: 1;"
             >
+              <div
+                class="action-cell octo-table-cell-btn"
+              />
               <div
                 class="octo-table-cell title-cell"
                 id="mainBoardHeader"
@@ -2218,6 +2221,9 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
               draggable="true"
               style="opacity: 1;"
             >
+              <div
+                class="action-cell octo-table-cell-btn"
+              />
               <div
                 class="octo-table-cell title-cell"
                 id="mainBoardHeader"
diff --git a/webapp/src/components/table/__snapshots__/table.test.tsx.snap b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
index 711e59c36..e2c35a906 100644
--- a/webapp/src/components/table/__snapshots__/table.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
@@ -1920,6 +1920,9 @@ exports[`components/table/Table limited card in table view 1`] = `
           draggable="true"
           style="opacity: 1;"
         >
+          <div
+            class="action-cell octo-table-cell-btn"
+          />
           <div
             class="octo-table-cell title-cell"
             id="mainBoardHeader"
@@ -1999,6 +2002,9 @@ exports[`components/table/Table limited card in table view 1`] = `
           draggable="true"
           style="opacity: 1;"
         >
+          <div
+            class="action-cell octo-table-cell-btn"
+          />
           <div
             class="octo-table-cell title-cell"
             id="mainBoardHeader"
@@ -2759,6 +2765,9 @@ exports[`components/table/Table should match snapshot without permissions 1`] =
           draggable="true"
           style="opacity: 1;"
         >
+          <div
+            class="action-cell octo-table-cell-btn"
+          />
           <div
             class="octo-table-cell title-cell"
             id="mainBoardHeader"
@@ -2994,6 +3003,9 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           draggable="true"
           style="opacity: 1;"
         >
+          <div
+            class="action-cell octo-table-cell-btn"
+          />
           <div
             class="octo-table-cell title-cell"
             id="mainBoardHeader"
diff --git a/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap b/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
index 14d421230..793d798a8 100644
--- a/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
@@ -357,6 +357,9 @@ exports[`components/table/TableRow should match snapshot, read-only 1`] = `
     draggable="true"
     style="opacity: 1;"
   >
+    <div
+      class="action-cell octo-table-cell-btn"
+    />
     <div
       class="octo-table-cell title-cell"
       id="mainBoardHeader"
diff --git a/webapp/src/components/table/calculation/calculationRow.scss b/webapp/src/components/table/calculation/calculationRow.scss
index 55c3e6992..65dca1bcb 100644
--- a/webapp/src/components/table/calculation/calculationRow.scss
+++ b/webapp/src/components/table/calculation/calculationRow.scss
@@ -1,4 +1,5 @@
 .CalculationRow {
+    padding-left: 32px;
     position: sticky;
     bottom: 0;
     height: 44px;
diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss
index 3a8540e28..bbc9ef118 100644
--- a/webapp/src/components/table/table.scss
+++ b/webapp/src/components/table/table.scss
@@ -263,12 +263,6 @@
         }
     }
 
-    .octo-table-group {
-        .title-cell {
-            padding-left: 32px;
-        }
-    }
-
     .octo-table-footer {
         .octo-table-cell {
             color: rgba(var(--center-channel-color-rgb), 0.6);
diff --git a/webapp/src/components/table/tableRow.scss b/webapp/src/components/table/tableRow.scss
index 3223d54d1..f44b0363d 100644
--- a/webapp/src/components/table/tableRow.scss
+++ b/webapp/src/components/table/tableRow.scss
@@ -57,6 +57,7 @@
         display: flex;
         visibility: hidden;
         margin-left: 8px;
+        width: 24px;
     }
 
     .URLProperty:hover .Button_Copy {
diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx
index 7d6723a75..77897cf7f 100644
--- a/webapp/src/components/table/tableRow.tsx
+++ b/webapp/src/components/table/tableRow.tsx
@@ -144,11 +144,11 @@ const TableRow = (props: Props) => {
             style={{opacity: isDragging ? 0.5 : 1}}
         >
 
-            {!props.readonly && (
-                <div className='action-cell octo-table-cell-btn'>
+            <div className='action-cell octo-table-cell-btn'>
+                {!props.readonly && (
                     <IconButton icon={<CompassIcon icon='drag-vertical'/>}/>
-                </div>
-            )}
+                )}
+            </div>
 
             {/* Name / title */}
             <div