From 8132b171f4a03388ed7ed8f27fefb1811cda28a7 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 03:43:38 +0100
Subject: [PATCH] fix(base): apply embed width-extension after base loads, not
 just on mount

useEffect ran once on mount with empty deps, but the wrapper div was
inside a conditional branch that only renders after the base query
resolves. Result: the ref was null when the effect ran, so nothing
extended. Move the wrapper outside the conditional so the ref is
always set, and re-run the effect when isLoading / isError / pageId
change so the extension applies once the table mounts.
---
 .../components/base-embed/base-embed-view.tsx | 49 ++++++++-----------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
index f371dfb2c..e60a4b0f9 100644
--- a/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
+++ b/apps/client/src/features/editor/components/base-embed/base-embed-view.tsx
@@ -24,6 +24,7 @@ function findWiderAncestor(el: HTMLElement): HTMLElement | null {
 
 function applyExtension(wrapper: HTMLDivElement) {
   const wrapperRect = wrapper.getBoundingClientRect();
+  if (wrapperRect.width === 0) return;
   const wider = findWiderAncestor(wrapper);
   if (!wider) {
     wrapper.style.setProperty("--embed-shift", "0px");
@@ -45,6 +46,7 @@ function applyExtension(wrapper: HTMLDivElement) {
 export function BaseEmbedView({ node }: NodeViewProps) {
   const pageId = node.attrs.pageId as string | null;
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const { isLoading, isError } = useBaseQuery(pageId ?? "");
 
   useEffect(() => {
     const wrapper = wrapperRef.current;
@@ -63,44 +65,35 @@ export function BaseEmbedView({ node }: NodeViewProps) {
       ro.disconnect();
       window.removeEventListener("resize", update);
     };
-  }, []);
+  }, [isLoading, isError, pageId]);
 
+  let content: React.ReactNode;
   if (!pageId) {
-    return (
-      <NodeViewWrapper>
-        <Box p="md">
-          <Text c="red">Invalid base embed (missing page id)</Text>
-        </Box>
-      </NodeViewWrapper>
+    content = (
+      <Box p="md">
+        <Text c="red">Invalid base embed (missing page id)</Text>
+      </Box>
     );
-  }
-
-  const { isLoading, isError } = useBaseQuery(pageId);
-
-  if (isLoading) {
-    return (
-      <NodeViewWrapper>
-        <Box p="md">
-          <Text c="dimmed">Loading...</Text>
-        </Box>
-      </NodeViewWrapper>
+  } else if (isLoading) {
+    content = (
+      <Box p="md">
+        <Text c="dimmed">Loading...</Text>
+      </Box>
     );
-  }
-
-  if (isError) {
-    return (
-      <NodeViewWrapper>
-        <Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
-          <Text c="dimmed">You don't have access to this database.</Text>
-        </Box>
-      </NodeViewWrapper>
+  } else if (isError) {
+    content = (
+      <Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
+        <Text c="dimmed">You don't have access to this database.</Text>
+      </Box>
     );
+  } else {
+    content = <BaseTable pageId={pageId} embedded />;
   }
 
   return (
     <NodeViewWrapper>
       <div ref={wrapperRef} style={{ minHeight: 200 }}>
-        <BaseTable pageId={pageId} embedded />
+        {content}
       </div>
     </NodeViewWrapper>
   );