diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js
index d1d8c3c725..e75dbe2595 100644
--- a/fastn-js/js/dom.js
+++ b/fastn-js/js/dom.js
@@ -1570,7 +1570,7 @@ class Node2 {
if (fastn_utils.isNull(staticValue)) {
return;
}
- ftd.breakpoint_width.set("mobile", fastn_utils.getStaticValue(staticValue));
+ ftd.breakpoint_width.set(fastn_utils.getStaticValue(staticValue));
} else if (kind === fastn_dom.PropertyKind.Css) {
let css_list = staticValue.map(obj => fastn_utils.getStaticValue(obj.item));
css_list.forEach((css) => {
diff --git a/fastn-js/js/fastn.js b/fastn-js/js/fastn.js
index f3d3c6ea44..9efd19228f 100644
--- a/fastn-js/js/fastn.js
+++ b/fastn-js/js/fastn.js
@@ -360,8 +360,7 @@ class RecordInstance {
}
this.#fields = fields;
- }
- if (this.#fields[key] === undefined) {
+ }else if (this.#fields[key] === undefined) {
this.#fields[key] = fastn.mutable(null);
this.#fields[key].setWithoutUpdate(value);
} else {
diff --git a/fastn-js/js/virtual.js b/fastn-js/js/virtual.js
index 167cd35ea4..8ff4bb3b6b 100644
--- a/fastn-js/js/virtual.js
+++ b/fastn-js/js/virtual.js
@@ -147,9 +147,22 @@ class Document2 {
fastn_virtual.document = new Document2();
+function addClosureToBreakpointWidth() {
+ let closure = fastn.closureWithoutExecute(function() {
+ let current = ftd.get_device();
+ let lastDevice = ftd.device.get();
+ if (current === lastDevice) {
+ return;
+ }
+ console.log("last_device", lastDevice, "current_device", current);
+ ftd.device.set(current);
+ });
+ ftd.breakpoint_width.addClosure(closure);
+}
fastn_virtual.hydrate = function(main) {
+ addClosureToBreakpointWidth();
let current_device = ftd.get_device();
let found_device = ftd.device.get();
if (current_device !== found_device) {
diff --git a/ftd/t/js/72-document-breakpoint.ftd b/ftd/t/js/72-document-breakpoint.ftd
new file mode 100644
index 0000000000..8cab35565e
--- /dev/null
+++ b/ftd/t/js/72-document-breakpoint.ftd
@@ -0,0 +1,9 @@
+-- ftd.document:
+breakpoint: 800
+
+-- ftd.text:
+color: red
+text if { ftd.device == "mobile" }: Mobile text
+text if { ftd.device == "desktop" }: Desktop text
+
+-- end: ftd.document
diff --git a/ftd/t/js/72-document-breakpoint.html b/ftd/t/js/72-document-breakpoint.html
new file mode 100644
index 0000000000..55534c234e
--- /dev/null
+++ b/ftd/t/js/72-document-breakpoint.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+