Add getDOMWidth #Fix Sidebar width default to minimum

googlefonts · Sep 18, 2023 · 8326519 · 8326519
1 parent 4f270af
commit 8326519
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -379,7 +379,7 @@ export class EditorController {
 
     const resizeObserver = new ResizeObserver(([element]) => {
       const totalWidth = this.sidebars.reduce(
-        (total, sidebar) => total + sidebar.getStoredWidth(),
+        (total, sidebar) => total + sidebar.getDOMWidth(),
         0
       );
       if (element.contentRect.width < totalWidth + MIN_CANVAS_SPACE) {

diff --git a/src/fontra/views/editor/sidebar.js b/src/fontra/views/editor/sidebar.js
@@ -106,11 +106,20 @@ export class Sidebar {
     const sidebarWidth = localStorage.getItem(
       `fontra-sidebar-width-${this.identifier}`
     );
-    let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH);
-    if (isNaN(width)) {
-      width = MIN_SIDEBAR_WIDTH;
+
+    if (!sidebarWidth) {
+      return;
     }
-    return width;
+
+    return clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH);
+  }
+
+  getDOMWidth() {
+    return parseInt(
+      getComputedStyle(document.documentElement)
+        .getPropertyValue(`--sidebar-content-width-${this.identifier}`)
+        .replace("px", "")
+    );
   }
 
   initResizeGutter() {
@@ -157,7 +166,7 @@ export class Sidebar {
       document.addEventListener("pointerup", onPointerUp, { once: true });
     });
     const sidebarWidth = this.getStoredWidth();
-    if (sidebarWidth) {
+    if (sidebarWidth !== undefined) {
       this.applyWidth(sidebarWidth);
     }
   }