Calculation row padding fix (#4338)

* Calculation row padding fix

* Updating table UI

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"

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"

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"

webapp/src/components/table/calculation/calculationRow.scss

@@ -1,4 +1,5 @@
 .CalculationRow {
+    padding-left: 32px;
     position: sticky;
     bottom: 0;
     height: 44px;

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

webapp/src/components/table/tableRow.scss

@@ -57,6 +57,7 @@
         display: flex;
         visibility: hidden;
         margin-left: 8px;
+        width: 24px;
     }
 
     .URLProperty:hover .Button_Copy {

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