feat: make app workspaces resizable

apps/dataset-builder/styles.css

@@ -79,8 +79,10 @@
 }
 
 .builder-layout {
+  --control-panel-width: 430px;
+
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
+  grid-template-columns: minmax(0, 1fr) 12px var(--control-panel-width);
   min-height: calc(100vh - 65px);
 }
 
@@ -230,6 +232,7 @@
 
 .source-card__heading {
   display: flex;
+  min-width: 0;
   align-items: center;
   gap: 8px;
 }
@@ -244,14 +247,15 @@
 }
 
 .source-card strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .source-card small {
+  min-width: 0;
   color: var(--muted);
   font: 600 0.72rem ui-monospace, SFMono-Regular, Consolas, monospace;
+  overflow-wrap: anywhere;
 }
 
 .asset-shelf {
@@ -282,16 +286,15 @@
   max-width: 100%;
   padding: 8px 9px 8px 11px;
   border: 1px solid var(--line);
-  border-radius: 999px;
+  border-radius: 13px;
   background: var(--surface);
 }
 
 .asset-chip__label {
-  overflow: hidden;
-  max-width: 210px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 0;
+  max-width: min(320px, 50vw);
   font-size: 0.74rem;
+  overflow-wrap: anywhere;
 }
 
 .asset-chip__state {
@@ -320,6 +323,7 @@
 .control-panel {
   position: sticky;
   top: 65px;
+  min-width: 0;
   align-self: start;
   overflow-y: auto;
   max-height: calc(100vh - 65px);
@@ -327,6 +331,15 @@
   border-left: 1px solid var(--line);
   background: rgb(12 24 21 / 86%);
   backdrop-filter: blur(18px);
+  container-name: builder-controls;
+  container-type: inline-size;
+}
+
+.builder-layout > .split-handle {
+  position: sticky;
+  top: 59px;
+  height: calc(100vh - 59px);
+  align-self: start;
 }
 
 .runtime-line {
@@ -335,8 +348,10 @@
 }
 
 .save-state {
+  min-width: 0;
   color: var(--muted);
   font-size: 0.7rem;
+  overflow-wrap: anywhere;
 }
 
 .control-section,
@@ -538,6 +553,10 @@
   gap: 11px;
 }
 
+.validation-card > :last-child {
+  min-width: 0;
+}
+
 .validation-dot {
   width: 10px;
   height: 10px;
@@ -550,6 +569,7 @@
 
 .validation-card strong {
   font-size: 0.82rem;
+  overflow-wrap: anywhere;
 }
 
 .validation-card p {
@@ -557,6 +577,7 @@
   color: var(--muted);
   font-size: 0.72rem;
   line-height: 1.5;
+  overflow-wrap: anywhere;
 }
 
 .validation-card.is-valid .validation-dot {
@@ -571,7 +592,11 @@
 
 @media (max-width: 1100px) {
   .builder-layout {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .builder-layout > .split-handle {
+    display: none;
   }
 
   .control-panel {
@@ -729,7 +754,6 @@
 }
 
 .builder-layout {
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
   min-height: calc(100vh - 59px);
 }
 
@@ -871,8 +895,19 @@
 }
 
 @media (max-width: 1100px) {
+  .builder-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .builder-layout > .split-handle {
+    display: none;
+  }
+
   .control-panel {
+    position: static;
     max-height: none;
+    border-top: 1px solid var(--line);
+    border-left: 0;
   }
 }
 
@@ -1003,3 +1038,50 @@
     grid-column: 4;
   }
 }
+
+@container builder-controls (max-width: 440px) {
+  .field-grid--three {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .trajectory-row {
+    grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 30px;
+    grid-template-rows: repeat(2, auto);
+  }
+
+  .trajectory-row__select,
+  .trajectory-row__remove {
+    grid-row: 1 / 3;
+    align-self: stretch;
+  }
+
+  .trajectory-row .field:nth-of-type(1) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .trajectory-row .field:nth-of-type(2) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .trajectory-row .field:nth-of-type(3) {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .trajectory-row .field:nth-of-type(4) {
+    grid-column: 3;
+    grid-row: 2;
+  }
+
+  .trajectory-row__remove {
+    grid-column: 4;
+  }
+}
+
+@container builder-controls (max-width: 340px) {
+  .field-grid--three {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}