diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx
index 50b7b0aa..268466b4 100644
--- a/src-web/components/GrpcConnectionSetupPane.tsx
+++ b/src-web/components/GrpcConnectionSetupPane.tsx
@@ -1,10 +1,10 @@
-import useSize from '@react-hook/size';
 import type { GrpcMetadataEntry, GrpcRequest } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import { useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
+import { useContainerSize } from '../hooks/useContainerQuery';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
@@ -73,7 +73,7 @@ export function GrpcConnectionSetupPane({
   const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
 
   const urlContainerEl = useRef<HTMLDivElement>(null);
-  const [paneWidth] = useSize(urlContainerEl.current);
+  const { width: paneWidth } = useContainerSize(urlContainerEl);
 
   const handleChangeUrl = useCallback(
     (url: string) => updateRequest.mutateAsync({ id: activeRequest.id, update: { url } }),
diff --git a/src-web/components/MarkdownEditor.tsx b/src-web/components/MarkdownEditor.tsx
index 2f0e1238..94becbc8 100644
--- a/src-web/components/MarkdownEditor.tsx
+++ b/src-web/components/MarkdownEditor.tsx
@@ -1,8 +1,8 @@
-import useSize from '@react-hook/size';
 import classNames from 'classnames';
 import { useRef } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { useContainerSize } from '../hooks/useContainerQuery';
 import { useKeyValue } from '../hooks/useKeyValue';
 import type { EditorProps } from './core/Editor/Editor';
 import { Editor } from './core/Editor/Editor';
@@ -22,7 +22,7 @@ interface Props extends Pick<EditorProps, 'heightMode' | 'stateKey' | 'forceUpda
 export function MarkdownEditor({ className, defaultValue, onChange, name, ...editorProps }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const [width] = useSize(containerRef.current);
+  const { width } = useContainerSize(containerRef);
   const wideEnoughForSplit = width > 600;
 
   const { set: setViewMode, value: rawViewMode } = useKeyValue<'edit' | 'preview' | 'both'>({
diff --git a/src-web/components/responseViewers/PdfViewer.tsx b/src-web/components/responseViewers/PdfViewer.tsx
index 350bedc6..0763165a 100644
--- a/src-web/components/responseViewers/PdfViewer.tsx
+++ b/src-web/components/responseViewers/PdfViewer.tsx
@@ -5,7 +5,7 @@ import './PdfViewer.css';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 import React, { useRef, useState } from 'react';
 import { Document, Page } from 'react-pdf';
-import useSize from '@react-hook/size';
+import { useContainerSize } from '../../hooks/useContainerQuery';
 
 interface Props {
   bodyPath: string;
@@ -20,7 +20,7 @@ export function PdfViewer({ bodyPath }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [numPages, setNumPages] = useState<number>();
 
-  const [containerWidth] = useSize(containerRef.current);
+  const { width: containerWidth } = useContainerSize(containerRef);
 
   const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
     setNumPages(nextNumPages);