@ashley-shrok/viewmodel-shell 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic — a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",

package/src/browser.ts

@@ -424,7 +424,7 @@ export class BrowserAdapter implements Adapter {
     backdrop.className = "vms-modal-backdrop";
 
     const modal = document.createElement("div");
-    modal.className = "vms-modal";
+    modal.className = `vms-modal${n.size ? ` vms-modal--${n.size}` : ""}`;
     modal.setAttribute("role", "dialog");
     modal.setAttribute("aria-modal", "true");
 

package/src/index.ts

@@ -145,6 +145,9 @@ export interface ModalNode {
   footer?: ViewNode[];
   /** Dispatched when the close button is clicked. If omitted, no close button is rendered. */
   dismissAction?: ActionEvent;
+  /** Width variant. Default is "medium" (~520px). "wide" (~800px) suits tables/dashboards;
+   *  "fullscreen" (~95vw/95vh) for content that needs the whole viewport. */
+  size?: "narrow" | "medium" | "wide" | "fullscreen";
 }
 
 export interface TableColumn {

package/styles/default.css

@@ -321,6 +321,12 @@ select.vms-field__input  { cursor: pointer; padding-right: 2.25rem; }
   display: flex;
   flex-direction: column;
 }
+/* Size variants — pick via ModalNode.size = "narrow" | "wide" | "fullscreen".
+   Default (no modifier) = ~520px, the same as .vms-modal--medium. */
+.vms-modal--narrow     { max-width: 400px; }
+.vms-modal--medium     { max-width: 520px; }
+.vms-modal--wide       { max-width: 800px; }
+.vms-modal--fullscreen { max-width: 95vw; max-height: 95vh; }
 .vms-modal__header {
   display: flex;
   align-items: center;
@@ -345,6 +351,11 @@ select.vms-field__input  { cursor: pointer; padding-right: 2.25rem; }
   flex-direction: column;
   gap: 0.75rem;
 }
+/* Children of the modal body must not be flex-shrunk below their natural
+   height — otherwise a table-wrapper (overflow:hidden) inside the modal
+   gets squeezed and clips rows. The modal body's overflow-y:auto handles
+   the scroll. */
+.vms-modal__body > * { flex-shrink: 0; }
 .vms-modal__footer {
   display: flex;
   justify-content: flex-end;
@@ -360,7 +371,9 @@ select.vms-field__input  { cursor: pointer; padding-right: 2.25rem; }
 .vms-table-wrapper {
   border: 1px solid var(--vms-border);
   border-radius: var(--vms-radius);
-  overflow: hidden;
+  /* Horizontal scroll when the table is wider than its container (e.g. a
+     7-column table inside a medium modal). Always-reachable beats clipped. */
+  overflow-x: auto;
 }
 .vms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .vms-table__th {