fix: Use correct box model when observing for changes (#164)

Author: just-boris

src/container-queries/__tests__/use-container-query.test.tsx

@@ -14,7 +14,7 @@ function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEnt
 
 test('should create a resize observer and observe the attached element', () => {
   const component = render(<TestComponent />);
-  expect(ResizeObserver.prototype.observe).toHaveBeenCalledWith(component.getByTestId('test'));
+  expect(ResizeObserver.prototype.observe).toHaveBeenCalledWith(component.getByTestId('test'), { box: 'border-box' });
 });
 
 test('should call the map function with the content box when the resize observer is triggered', () => {

src/internal/container-queries/__tests__/use-resize-observer.test.tsx

@@ -26,7 +26,7 @@ function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEnt
 
 test('should create a resize observer and observe the attached element', () => {
   const component = render(<TestComponent />);
-  expect(ResizeObserver.prototype.observe).toHaveBeenCalledWith(component.getByTestId('test'));
+  expect(ResizeObserver.prototype.observe).toHaveBeenCalledWith(component.getByTestId('test'), { box: 'border-box' });
 });
 
 test('should call the map function with the content box when the resize observer is triggered', () => {

src/internal/container-queries/use-resize-observer.ts

@@ -62,7 +62,7 @@ export function useResizeObserver(elementRef: ElementReference, onObserve: (entr
           });
         }
       });
-      observer.observe(element);
+      observer.observe(element, { box: 'border-box' });
       return () => {
         connected = false;
         observer.disconnect();