enhance(ux): resize image horizontal handles

src/main/frontend/components/block.css

@@ -27,7 +27,7 @@
   }
 
   .asset-container {
-    @apply relative inline-block mt-2;
+    @apply relative inline-block mt-2 w-full;
 
     .asset-action-bar {
       @apply top-0.5 right-0.5 absolute flex items-center
@@ -44,16 +44,11 @@
         @apply opacity-100;
       }
     }
-  }
 
-  .resize {
-    display: inline-flex;
-    /* Fix chrome missing resize handle issue https://bugs.chromium.org/p/chromium/issues/detail?id=1135676&q=css%20resize%20type%3DBug&can=2.*/
-    transform: translate3d(0, 0, 0);
-  }
-
-  .image-resize {
-    display: flex;
+    > img {
+      max-width: unset;
+      width: 100%;
+    }
   }
 
   .draw [aria-labelledby="shapes-title"] {
@@ -963,3 +958,23 @@ html.is-mac {
     }
   }
 }
+
+.ls-resize-image {
+  @apply flex relative;
+
+  .handle-left , .handle-right {
+    @apply absolute w-[6px] h-[15%] bg-black/30 hover:bg-black/70
+    top-[50%] left-[5px] rounded-full cursor-col-resize select-none
+    translate-y-[-50%] opacity-0;
+  }
+
+  .handle-right {
+    @apply left-auto right-[5px]
+  }
+
+  &:hover {
+    .handle-left, .handle-right {
+      @apply opacity-100;
+    }
+  }
+}