`maxLines` can return a font size where an unbreakable line overflows the container

[damnsamn]

Describe the Bug

When using useFit with maxLines, Fitbox can return a font size where the requested line count is satisfied, but an individual unbreakable line is wider than the available container.

In the reproduction, the text Innovation Center is fitted into a 320px-wide container with:

{
  minSize: 48,
  maxSize: 72,
  maxLines: 2,
}

Innovation fits within the container at 48px, but not at 72px.

Fitbox returns 72px with a line count of two. The browser renders two lines, but the first line is 364px wide and therefore overflows the 320px container.

Reproduction

CodeSandbox:

https://codesandbox.io/p/sandbox/fitbox-unbreakable-overflow-repro-lvjf25

Direct preview:

https://lvjf25.csb.app/

Minimal usage:

import { useFit } from "@darkroomengineering/fitbox/react";

const fitRef = useFit({
  minSize: 48,
  maxSize: 72,
  maxLines: 2,
});

export default function App() {
  return (
    <div style={{ width: 320 }}>
      <div
        ref={fitRef}
        style={{
          fontFamily: "Arial, sans-serif",
          fontWeight: 700,
          lineHeight: 1,
        }}
      >
        Innovation Center
      </div>
    </div>
  );
}

Steps to reproduce:

1. Open the CodeSandbox preview.
2. Compare the actual Fitbox result with the hard-coded expected result directly below it.
3. Observe that Fitbox returns 72px and two lines.
4. Observe that the fitted element has a scrollWidth of 364px and a clientWidth of 320px.

The interactive example can also be used to edit the text and resize the available width.

Expected Behavior

Fitbox should consider both the requested line count and the width of each rendered line.

For this example, it should reduce the font size until the widest line fits within the 320px container. The hard-coded comparison demonstrates that approximately 63px fits:

font-size: 63px
scrollWidth: 320px
clientWidth: 320px

More generally, a result returned by multi-line fitting should not horizontally overflow its specified width unless satisfying minSize makes overflow unavoidable.

Actual Behavior

Fitbox returns:

font-size: 72px
line count: 2
scrollWidth: 364px
clientWidth: 320px

The configured maxLines: 2 constraint is satisfied, but the first line is wider than the container and visibly overflows.

Environment

• Package version: @darkroomengineering/fitbox@0.2.1
• Framework / version: React 19.2.8, Vite 8.2.0
• Browser / OS: Chrome/Chromium on macOS; also reproduced in the CodeSandbox browser preview