Text unexpectefly overflows inside of div elements

[nabil-rady]

Expected Behavior

Div should be rendered with text inside

Current Behavior

Text is rendered incorrectly as shown in this image

Possible Solution

I tried adding width: fit but that didn't seem to fix anything.

Steps To Reproduce

I am trying to render this custom node in react-flow

import { Handle, Node, NodeProps, Position } from '@xyflow/react';

function MindMapNode({
  data,
}: NodeProps<Node<{ label: string; className: string }>>) {
  return (
    <>
      <Handle type="target" id="tt" position={Position.Top} />
      <Handle type="target" id="tb" position={Position.Bottom} />
      <Handle type="source" id="st" position={Position.Top} />
      <Handle type="source" id="sb" position={Position.Bottom} />

      <div className={data.className}>{data.label}</div>
    </>
  );
}

export default MindMapNode;

function downloadImage(dataUrl: string) {
  const a = document.createElement('a');

  a.setAttribute('download', 'reactflow.png');
  a.setAttribute('href', dataUrl);
  a.click();
}

toPng(document.querySelector<HTMLElement>('.react-flow__viewport')!, {
      skipFonts: true,
    }).then(downloadImage);

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Your Environment

• html-to-image: 1.11.13
• OS: Linux 6.13 Arch
• Browser: Mozilla 135.0

[biiibooo]

👋 @nabil-rady

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.