fix(web): ensure drawer can slide in/out and not just appear

web/src/components/NavigationDrawer.jsx

@@ -12,11 +12,12 @@ export default function NavigationDrawer({ children, header }) {
 
   return (
     <Fragment>
-      {showDrawer ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
+      {showDrawer ? <div key="scrim" className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
       <div
-        className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform translate-x-0 ${
-          !showDrawer ? '-translate-x-full' : ''
-        } lg:translate-x-0 transition-transform duration-300`}
+        key="drawer"
+        className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform ${
+          !showDrawer ? '-translate-x-full lg:translate-x-0' : 'translate-x-0'
+        } transition-transform duration-300`}
         onClick={handleDismiss}
       >
         {header ? (

web/src/components/RelativeModal.jsx

@@ -82,8 +82,9 @@ export default function RelativeModal({ className, role = 'dialog', children, on
 
   const menu = (
     <Fragment>
-      <div className="absolute inset-0 z-10" onClick={handleDismiss} />
+      <div key="scrim" className="absolute inset-0 z-10" onClick={handleDismiss} />
       <div
+        key="menu"
         className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${
           show ? 'scale-100 opacity-100' : ''
         } ${className}`}