improve item actions animation

src/components/caloriesList/CalorieRow.tsx

@@ -25,15 +25,17 @@ function CalorieRow (props: CalorieRowProps) {
 
   return (
     <div className={cx(styles.calorieRow, {[styles.selected]: isSelected})} {...{onClick}}>
-      <ItemActions {...{
-        className: cx(
-          styles.itemActions,
-          {
-            [styles.open]: isSelected
-          }
-        ),
-        removeItem: () => removeItem(item)
-      }} />
+      <div className={cx(
+        styles.itemActionsWrapper,
+        {
+          [styles.open]: isSelected
+        }
+      )}>
+        <ItemActions {...{
+          className: styles.itemActions,
+          removeItem: () => removeItem(item)
+        }} />
+      </div>
 
       <div className={styles.itemValues}>
         <div className={styles.title}>{item.title}</div>

src/components/caloriesList/calorieRow.scss

@@ -23,20 +23,22 @@
     flex: 1;
 }
 
-.itemActions {
-    $itemActionTransitionTime: .1s;
+.itemActionsWrapper {
+    $itemActionTransitionTime: .2s;
     max-width: 0;
-    padding: 0;
     overflow: hidden;
-    transition: max-width $itemActionTransitionTime, padding $itemActionTransitionTime, margin-right $itemActionTransitionTime;
-    font-size: 1.3em;
+    transition: max-width $itemActionTransitionTime linear;
 
     &.open {
-        max-width: 2em;
-        margin-right: .3em;
+        max-width: 5em;
     }
 }
 
+.itemActions {
+    font-size: 1.3em;
+    margin-right: .5em;
+}
+
 .count {
 
 }

src/components/caloriesList/itemActions.css

@@ -1,7 +1,6 @@
 .itemActions {
     display: flex;
     justify-content: flex-end;
-    padding: 0 .3em;
 
     .button {
         &:not(:first-child) {