feat: add support for vertical resizing in design mode

Author: devvaannsh

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -51,6 +51,7 @@
 }
 
 .frame-container.responsive-viewport {
+    position: relative;
     justify-content: center;
     align-items: stretch;
     background: #1a1a1e;
@@ -61,11 +62,8 @@
 }
 
 .responsive-handle {
-    width: 6px;
-    cursor: ew-resize;
     background: transparent;
     flex-shrink: 0;
-    position: relative;
     z-index: 5;
     transition: background 0.15s;
 }
@@ -75,7 +73,13 @@
     background: rgba(66, 133, 244, 0.5);
 }
 
-.responsive-handle::after {
+.responsive-handle-horizontal {
+    width: 6px;
+    cursor: ew-resize;
+    position: relative;
+}
+
+.responsive-handle-horizontal::after {
     content: '';
     position: absolute;
     top: 50%;
@@ -87,8 +91,31 @@
     background: rgba(255, 255, 255, 0.25);
 }
 
-.responsive-handle:hover::after,
-.responsive-handle.dragging::after {
+.responsive-handle-horizontal:hover::after,
+.responsive-handle-horizontal.dragging::after {
+    background: rgba(255, 255, 255, 0.6);
+}
+
+.responsive-handle-vertical {
+    position: absolute;
+    height: 6px;
+    cursor: ns-resize;
+}
+
+.responsive-handle-vertical::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 2px;
+    border-radius: 1px;
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.responsive-handle-vertical:hover::after,
+.responsive-handle-vertical.dragging::after {
     background: rgba(255, 255, 255, 0.6);
 }