[frontend] add logic to open/close tasks on print

frontend/src/pages/checklist/[filters].tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, MouseEvent, useMemo, useState } from 'react'
+import { ChangeEvent, FC, MouseEvent, useEffect, useMemo, useState } from 'react'
 
 import { Cached, ExpandLess, ExpandMore, FilterList } from '@mui/icons-material'
 import Print from '@mui/icons-material/Print'
@@ -99,6 +99,33 @@ const ChecklistResults: FC<ChecklistResultsProps> = ({
     window.print()
   }
 
+  // handle expanding all task details on print and closing tasks that weren't previously open after print
+  useEffect(() => {
+    const beforePrint = (event: Event) => {
+      let details = [...document.querySelectorAll<HTMLDetailsElement>('details:not([open])')]
+      for (let e of details) {
+        e.setAttribute('open', '')
+        e.dataset.wasclosed = ''
+      }
+    }
+
+    const afterPrint = (event: Event) => {
+      let details = [...document.querySelectorAll<HTMLDetailsElement>('details[data-wasclosed]')]
+      for (let e of details) {
+        e.removeAttribute('open')
+        delete e.dataset.wasclosed
+      }
+    }
+
+    window.addEventListener('beforeprint', beforePrint)
+    window.addEventListener('afterprint', afterPrint)
+
+    return () => {
+      window.removeEventListener('beforeprint', beforePrint)
+      window.removeEventListener('afterprint', afterPrint)
+    }
+  }, [])
+
   function handleOnRestartQuizClick(e: MouseEvent) {
     e.preventDefault()
     removeQuizData()
@@ -300,7 +327,7 @@ const ChecklistResults: FC<ChecklistResultsProps> = ({
               srTag={t('sr-tag')}
               tasks={receivingBenefits.tasks.filter((task) => filterTasksByTag(task, filters))}
             />
-            <div className="mt-4 lg:hidden">
+            <div className="mt-4 print:hidden lg:hidden">
               <Button
                 variant="text"
                 startIcon={<Cached />}

frontend/src/styles/globals.css

@@ -267,8 +267,4 @@ main .external-link[target='_blank']::after {
   margin-left: 0.2em;
   width: 1em;
   text-align: center;
-}
-
-.page-nav-active {
-  @apply bg-[#4ED8E8] bg-opacity-[12%] text-[#008490];
-}
+}