fix: isolate widget editor forms

packages/widgets/src/modals/widget-edit-modal.module.css

@@ -5,8 +5,8 @@
   align-items: start;
 }
 
-.workspace[data-with-preview] {
-  grid-template-columns: minmax(0, 3fr) minmax(34rem, 2fr);
+.workspace[data-with-preview][data-with-settings] {
+  grid-template-columns: minmax(0, 3fr) auto minmax(34rem, 2fr);
 }
 
 .previewPanel {
@@ -28,7 +28,8 @@
 
 .previewCanvas {
   position: relative;
-  align-self: center;
+  width: 100%;
+  height: clamp(24rem, calc(100dvh - 17rem), 44rem);
   padding: var(--mantine-spacing-lg);
   overflow: hidden;
   border: 1px solid var(--mantine-color-default-border);
@@ -40,6 +41,11 @@
   background-size: 2rem 2rem;
 }
 
+.previewDivider {
+  height: auto;
+  align-self: stretch;
+}
+
 .previewViewport {
   position: relative;
   flex: 0 0 auto;
@@ -78,6 +84,10 @@
   scrollbar-gutter: stable;
 }
 
+.settingsForm {
+  min-width: 0;
+}
+
 .fullWidthField {
   grid-column: 1 / -1;
 }
@@ -142,7 +152,7 @@
 }
 
 @media (max-width: 68em) {
-  .workspace[data-with-preview] {
+  .workspace[data-with-preview][data-with-settings] {
     grid-template-columns: 1fr;
   }
 
@@ -151,6 +161,14 @@
     max-width: 44rem;
   }
 
+  .previewDivider {
+    display: none;
+  }
+
+  .previewCanvas {
+    height: 24rem;
+  }
+
   .settingsPanel {
     max-height: none;
     overflow: visible;