Lock background scroll while modals are open (#1244)

Chakra 2.9 flipped the Modal preserveScrollBarGap default to true
(chakra-ui/chakra-ui#8222), which maps to react-remove-scroll's
removeScrollBar=false. That drops the body overflow:hidden lock, leaving
the page scrollbar live and draggable behind the modal overlay. Set
preserveScrollBarGap={false} on every Modal/Drawer/AlertDialog to restore
the pre-2.10 hard scroll lock.

Author: microbit-matt-hillsdon

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