Lock background scroll while modals are open

src/common/ConfirmDialog.tsx

@@ -38,6 +38,7 @@ export const ConfirmDialog = ({
       isOpen
       leastDestructiveRef={leastDestructiveRef}
       onClose={() => callback(false)}
+      preserveScrollBarGap={false}
     >
       <AlertDialogOverlay>
         <AlertDialogContent>

src/common/GenericDialog.tsx

@@ -47,6 +47,7 @@ export const GenericDialog = ({
       size={size}
       returnFocusOnClose={returnFocusOnClose}
       finalFocusRef={finalFocusRef}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent minWidth="560px" my="auto">

src/common/InputDialog.tsx

@@ -73,7 +73,7 @@ export const InputDialog = <T,>({
   };
 
   return (
-    <Modal isOpen onClose={onCancel} size={size} finalFocusRef={finalFocusRef}>
+    <Modal isOpen onClose={onCancel} size={size} finalFocusRef={finalFocusRef} preserveScrollBarGap={false}>
       <ModalOverlay>
         <ModalContent>
           <ModalHeader>

src/common/ProgressDialog.tsx

@@ -42,6 +42,7 @@ const ProgressDialog = ({
       onClose={doNothing}
       isCentered
       size={body ? "xl" : "md"}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay />
       <ModalContent>

src/serial/SerialHelp.tsx

@@ -44,6 +44,7 @@ export const SerialHelpDialog = ({
       onClose={onClose}
       size="lg"
       finalFocusRef={finalFocusRef}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent>

src/settings/LanguageDialog.tsx

@@ -56,6 +56,7 @@ export const LanguageDialog = ({
       onClose={onClose}
       size="xl"
       finalFocusRef={finalFocusRef}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent>

src/settings/SettingsDialog.tsx

@@ -35,6 +35,7 @@ export const SettingsDialog = ({
       onClose={onClose}
       size="lg"
       finalFocusRef={finalFocusRef}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent>

src/workbench/AboutDialog/AboutDialog.tsx

@@ -82,6 +82,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
       onClose={onClose}
       size="4xl"
       finalFocusRef={finalFocusRef}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent>

src/workbench/FeedbackForm.tsx

@@ -47,6 +47,7 @@ const FeedbackForm = ({
       onClose={onClose}
       size="2xl"
       finalFocusRef={finalFocusRef}
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent>

src/workbench/SideBarHeader.tsx

@@ -143,6 +143,7 @@ const SideBarHeader = ({
           isOpen={searchModal.isOpen}
           onClose={handleModalClosed}
           size="lg"
+          preserveScrollBarGap={false}
         >
           <ModalOverlay>
             <ModalContent

src/workbench/WelcomeDialog.tsx

@@ -40,6 +40,7 @@ const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
       onClose={onClose}
       size="2xl"
       scrollBehavior="outside"
+      preserveScrollBarGap={false}
     >
       <ModalOverlay>
         <ModalContent>