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.

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 (
+    content = (
-      <NodeViewWrapper>
+      <Box p="md">
-        <Box p="md">
+        <Text c="red">Invalid base embed (missing page id)</Text>
-          <Text c="red">Invalid base embed (missing page id)</Text>
+      </Box>
-        </Box>
-      </NodeViewWrapper>
     );
-  }
+  } else if (isLoading) {
-
+    content = (
-  const { isLoading, isError } = useBaseQuery(pageId);
+      <Box p="md">
-
+        <Text c="dimmed">Loading...</Text>
-  if (isLoading) {
+      </Box>
-    return (
-      <NodeViewWrapper>
-        <Box p="md">
-          <Text c="dimmed">Loading...</Text>
-        </Box>
-      </NodeViewWrapper>
     );
-  }
+  } else if (isError) {
-
+    content = (
-  if (isError) {
+      <Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
-    return (
+        <Text c="dimmed">You don't have access to this database.</Text>
-      <NodeViewWrapper>
+      </Box>
-        <Box p="md" bg="gray.0" style={{ borderRadius: 8 }}>
-          <Text c="dimmed">You don't have access to this database.</Text>
-        </Box>
-      </NodeViewWrapper>
     );
+  } else {
+    content = <BaseTable pageId={pageId} embedded />;
   }
 
   return (
     <NodeViewWrapper>
       <div ref={wrapperRef} style={{ minHeight: 200 }}>
-        <BaseTable pageId={pageId} embedded />
+        {content}
       </div>
     </NodeViewWrapper>
   );