Update ItemWithCounter layout and sizing styles

Changed .item-with-counter to use flexbox for centering, set explicit width and height, and adjusted image sizing to use auto width and 100% height. Also updated positioning for .item-times class.

Author: JorchCortez

src/Components/common/styles/ItemWithCounter.css

@@ -1,8 +1,12 @@
 
 
 .item-with-counter {
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
+    width: 2.5rem !important;
+    height: 2.5rem !important;
 }
 
 .item-with-counter p {
@@ -13,7 +17,7 @@
 
     &.item-times {
         position: absolute;
-        bottom: 5px;
+        bottom: 0rem;
         right: 0;
     }
     &.item-unknown {
@@ -26,8 +30,8 @@
 }
 
 .item-with-counter img {
-    width: 2.5rem !important;
-    height: 2.5rem !important;
+    width: auto !important; ;
+    height: 100% !important; ;
 
     &.done {
         filter: grayscale(0) brightness(1) !important;