v0.15.8

web/css/styles.css

@@ -10342,4 +10342,68 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   .public-custom-chart-wrap {
     min-height: 140px;
   }
-}
+}
+/* Keep Flow interpretation compact on every viewport. Details are opt-in. */
+.flow-natural-preview {
+  display: block;
+  min-height: 0;
+  max-height: none;
+  padding: 0;
+  overflow: hidden;
+}
+
+.flow-preview-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 0;
+  background: var(--surface);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.flow-preview-toggle strong {
+  font-size: .8rem;
+}
+
+.flow-preview-toggle-icon {
+  color: var(--muted);
+  font-size: 1rem;
+  transition: transform .15s ease;
+}
+
+.flow-preview-details {
+  display: none;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  max-height: 34dvh;
+  padding: 9px 14px 11px;
+  overflow: auto;
+}
+
+.flow-natural-preview.is-expanded .flow-preview-details {
+  display: flex;
+}
+
+.flow-natural-preview.is-expanded .flow-preview-toggle {
+  border-bottom: 1px solid var(--line);
+}
+
+.flow-natural-preview.is-expanded .flow-preview-toggle-icon {
+  transform: rotate(180deg);
+}
+
+.flow-natural-preview .flow-preview-runtime {
+  justify-content: start;
+  text-align: left;
+}
+
+.flow-natural-preview .flow-preview-runtime span {
+  white-space: normal;
+}