From 6c94afe99f23f52b3badee825ca4f2eab35cf059 Mon Sep 17 00:00:00 2001
From: Enoch Riese <enoch.riese@gmail.com>
Date: Fri, 23 Jun 2023 17:45:50 -0500
Subject: [PATCH] shared component for views that have patterns and side menus

---
 .../workbench/menus/shared/menu-wrapper.mjs   | 25 ++++---
 .../components/workbench/views/cut/index.mjs  | 29 +++++---
 .../components/workbench/views/cut/menu.mjs   |  2 +-
 .../workbench/views/draft/index.mjs           | 67 ++++++++----------
 .../components/workbench/views/draft/menu.mjs | 66 ++++++++----------
 .../workbench/views/inspect/index.mjs         | 69 +++++++++----------
 .../views/inspect/inspector/menu.mjs          |  2 +-
 .../workbench/views/inspect/menu.mjs          |  2 +-
 .../workbench/views/pattern-with-menu.mjs     | 37 ++++++++++
 .../workbench/views/print/index.mjs           | 31 ++++++---
 .../components/workbench/views/print/menu.mjs |  2 +-
 .../components/workbench/views/test/index.mjs | 67 ++++++++----------
 .../components/workbench/views/test/menu.mjs  |  2 +-
 .../workbench/views/test/options.mjs          |  2 +-
 .../workbench/views/view-header.mjs           | 11 +--
 sites/shared/components/wrappers/modal.mjs    |  2 +-
 sites/shared/components/wrappers/page.mjs     |  4 +-
 sites/shared/context/modal-context.mjs        | 11 ---
 18 files changed, 221 insertions(+), 210 deletions(-)
 create mode 100644 sites/shared/components/workbench/views/pattern-with-menu.mjs

diff --git a/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs b/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs
index bfa848a07dd..47057e18825 100644
--- a/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs
+++ b/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs
@@ -1,11 +1,11 @@
 import { useContext, useState, useEffect, useCallback } from 'react'
 import { ModalContext } from 'shared/context/modal-context.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
-import { CloseIcon } from 'shared/components/icons.mjs'
+import { CloseIcon, WrenchIcon } from 'shared/components/icons.mjs'
 import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
 
-export const MenuWrapper = ({ Icon, children, childProps }) => {
-  const { setModal, clearModal, setModalProps, modalContent } = useContext(ModalContext)
+export const MenuWrapper = ({ children }) => {
+  const { setModal, clearModal, modalContent } = useContext(ModalContext)
   const [modalOpen, setModalOpen] = useState(false)
 
   const Modal = useCallback(
@@ -17,7 +17,7 @@ export const MenuWrapper = ({ Icon, children, childProps }) => {
 
       return (
         <ModalWrapper slideFrom="right" keepOpenOnClick keepOpenOnSwipe>
-          {children(props)}
+          {children}
           <button
             className="btn btn-primary btn-circle sticky bottom-2 float-right"
             onClick={closeModal}
@@ -33,8 +33,8 @@ export const MenuWrapper = ({ Icon, children, childProps }) => {
   useEffect(() => {
     if (!modalOpen) return
 
-    setModal(Modal, childProps)
-  }, [childProps, modalOpen, Modal])
+    setModal(Modal)
+  }, [modalOpen, Modal])
 
   useEffect(() => {
     if (modalContent === null) setModalOpen(false)
@@ -46,11 +46,14 @@ export const MenuWrapper = ({ Icon, children, childProps }) => {
 
   return (
     <>
-      <div className="hidden lg:block">{children(childProps)}</div>
-      <div className="lg:hidden">
-        <button className={`btn btn-primary btn-circle fixed right-2 bottom-16`} onClick={onClick}>
-          <Icon />{' '}
-        </button>
+      <button
+        className={`btn btn-primary btn-circle sticky  m-4 bottom-16 self-end lg:hidden`}
+        onClick={onClick}
+      >
+        <WrenchIcon />{' '}
+      </button>
+      <div className="hidden lg:block w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll">
+        {children}
       </div>
     </>
   )
diff --git a/sites/shared/components/workbench/views/cut/index.mjs b/sites/shared/components/workbench/views/cut/index.mjs
index 515097c0e00..3163dd93d1a 100644
--- a/sites/shared/components/workbench/views/cut/index.mjs
+++ b/sites/shared/components/workbench/views/cut/index.mjs
@@ -2,6 +2,7 @@ import { useEffect, useCallback } from 'react'
 import { useTranslation } from 'next-i18next'
 import { CutMenu, ns as menuNs } from './menu.mjs'
 import { MovablePattern } from 'shared/components/workbench/pattern/movable/index.mjs'
+import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
 import { IconWrapper } from 'shared/components/icons.mjs'
 import {
   activeMaterialPath,
@@ -11,7 +12,7 @@ import {
   useMaterialLength,
 } from './hooks'
 
-export const ns = [...menuNs]
+export const ns = [...menuNs, ...wrapperNs]
 
 const SheetIcon = (props) => (
   <IconWrapper {...props}>
@@ -44,6 +45,7 @@ export const CutView = ({
   account,
   DynamicDocs,
   Design,
+  setSettings,
 }) => {
   const { t } = useTranslation(['workbench', 'plugin'])
 
@@ -64,15 +66,22 @@ export const CutView = ({
   }, [materialSettings, materialList, setActiveMaterial])
 
   return (
-    <div>
-      <div className="flex flex-row">
-        <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
-          <div className="flex justify-between items-baseline">
+    <PatternWithMenu
+      {...{
+        settings,
+        ui,
+        update,
+        control: account.control,
+        setSettings,
+        title: (
+          <div className="px-2 flex flex-wrap justify-between items-baseline">
             <h2 className="capitalize">
               {t('layoutThing', { thing: design }) + ' ' + t('forCutting')}
             </h2>
             <MaterialCounter settings={settings} renderProps={renderProps} />
           </div>
+        ),
+        pattern: (
           <div className="my-4">
             {materialList.length > 1 ? (
               <div className="tabs">
@@ -99,8 +108,8 @@ export const CutView = ({
               }}
             />
           </div>
-        </div>
-        <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
+        ),
+        menu: (
           <CutMenu
             {...{
               design,
@@ -115,8 +124,8 @@ export const CutView = ({
               materialSettings,
             }}
           />
-        </div>
-      </div>
-    </div>
+        ),
+      }}
+    />
   )
 }
diff --git a/sites/shared/components/workbench/views/cut/menu.mjs b/sites/shared/components/workbench/views/cut/menu.mjs
index e79ad39d7cc..6f7fcd26c2f 100644
--- a/sites/shared/components/workbench/views/cut/menu.mjs
+++ b/sites/shared/components/workbench/views/cut/menu.mjs
@@ -19,7 +19,7 @@ const CutActions = ({ update, ui, materialSettings }) => {
   const resetLayout = () => update.ui(['layouts', 'cut', materialSettings.activeMaterial])
 
   return (
-    <div className="mt-2 mb-4">
+    <div>
       <div className="flex justify-evenly flex-col lg:flex-row">
         <ShowButtonsToggle update={update} ui={ui} />
         <button className="btn btn-primary btn-outline" onClick={resetLayout}>
diff --git a/sites/shared/components/workbench/views/draft/index.mjs b/sites/shared/components/workbench/views/draft/index.mjs
index 7feaa189187..2985bd70c01 100644
--- a/sites/shared/components/workbench/views/draft/index.mjs
+++ b/sites/shared/components/workbench/views/draft/index.mjs
@@ -1,9 +1,8 @@
 import { PanZoomPattern as ShowPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
 import { DraftMenu, ns as menuNs } from './menu.mjs'
-import { ViewHeader, ns as headerNs } from 'shared/components/workbench/views/view-header.mjs'
-import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
+import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
 
-export const ns = [menuNs, ...headerNs]
+export const ns = [...menuNs, ...wrapperNs]
 
 export const DraftView = ({
   design,
@@ -34,39 +33,33 @@ export const DraftView = ({
   }
 
   return (
-    <PanZoomContextProvider>
-      <div className="flex flex-col">
-        <ViewHeader
-          {...{
-            settings,
-            ui,
-            update,
-            control: account.control,
-            setSettings,
-          }}
-        />
-        <div className="flex flex-row">
-          <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">{output}</div>
-          <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
-            <DraftMenu
-              {...{
-                design,
-                pattern,
-                patternConfig,
-                settings,
-                ui,
-                update,
-                language,
-                account,
-                DynamicDocs,
-                renderProps,
-                view,
-                setView,
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </PanZoomContextProvider>
+    <PatternWithMenu
+      {...{
+        settings,
+        ui,
+        update,
+        control: account.control,
+        pattern: output,
+        setSettings,
+        menu: (
+          <DraftMenu
+            {...{
+              design,
+              pattern,
+              patternConfig,
+              settings,
+              ui,
+              update,
+              language,
+              account,
+              DynamicDocs,
+              renderProps,
+              view,
+              setView,
+            }}
+          />
+        ),
+      }}
+    />
   )
 }
diff --git a/sites/shared/components/workbench/views/draft/menu.mjs b/sites/shared/components/workbench/views/draft/menu.mjs
index 25dd80adcdb..94dccd0fc07 100644
--- a/sites/shared/components/workbench/views/draft/menu.mjs
+++ b/sites/shared/components/workbench/views/draft/menu.mjs
@@ -7,46 +7,38 @@ import {
   ns as coreMenuNs,
 } from 'shared/components/workbench/menus/core-settings/index.mjs'
 import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs'
-import { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
-import { WrenchIcon } from 'shared/components/icons.mjs'
 
 export const ns = [...coreMenuNs, ...designMenuNs, ...uiNs]
 
-export const DraftMenu = (props) => {
-  return (
-    <MenuWrapper Icon={WrenchIcon} childProps={props}>
-      {({
-        design,
-        patternConfig,
-        settings,
-        ui,
-        update,
-        language,
-        account,
-        DynamicDocs,
-        view,
-        setView,
-      }) => {
-        const control = account.control
-        const menuProps = {
-          design,
-          patternConfig,
-          settings,
-          update,
-          language,
-          account,
-          DynamicDocs,
-          control,
-        }
+export const DraftMenu = ({
+  design,
+  patternConfig,
+  settings,
+  ui,
+  update,
+  language,
+  account,
+  DynamicDocs,
+  view,
+  setView,
+}) => {
+  const control = account.control
+  const menuProps = {
+    design,
+    patternConfig,
+    settings,
+    update,
+    language,
+    account,
+    DynamicDocs,
+    control,
+  }
 
-        return (
-          <nav className="grow mb-12">
-            <DesignOptions {...menuProps} />
-            <CoreSettings {...menuProps} />
-            <UiSettings {...menuProps} {...{ ui, view, setView }} />
-          </nav>
-        )
-      }}
-    </MenuWrapper>
+  return (
+    <nav>
+      <DesignOptions {...menuProps} />
+      <CoreSettings {...menuProps} />
+      <UiSettings {...menuProps} {...{ ui, view, setView }} />
+    </nav>
   )
 }
diff --git a/sites/shared/components/workbench/views/inspect/index.mjs b/sites/shared/components/workbench/views/inspect/index.mjs
index 9c06b39e9a0..51f0b34e14d 100644
--- a/sites/shared/components/workbench/views/inspect/index.mjs
+++ b/sites/shared/components/workbench/views/inspect/index.mjs
@@ -2,16 +2,16 @@ import { useState } from 'react'
 import { InspectorPattern } from './inspector/pattern.mjs'
 import { DraftMenu, ns as menuNs } from './menu.mjs'
 import { objUpdate } from 'shared/utils.mjs'
-import { ViewHeader } from '../view-header.mjs'
-import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
+import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
 
-export const ns = menuNs
+export const ns = [...menuNs, ...wrapperNs]
 
 export const InspectView = ({
   design,
   pattern,
   patternConfig,
   settings,
+  setSettings,
   ui,
   update,
   language,
@@ -67,39 +67,34 @@ export const InspectView = ({
   }
 
   return (
-    <PanZoomContextProvider>
-      <div className="flex flex-col">
-        <ViewHeader
-          {...{
-            settings,
-            ui,
-            update,
-            control: account.control,
-          }}
-        />
-        <div className="flex flex-row">
-          <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">{output}</div>
-          <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
-            <DraftMenu
-              {...{
-                design,
-                pattern,
-                patternConfig,
-                settings,
-                ui,
-                update,
-                language,
-                account,
-                DynamicDocs,
-                inspector,
-                renderProps,
-                view,
-                setView,
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </PanZoomContextProvider>
+    <PatternWithMenu
+      {...{
+        settings,
+        ui,
+        update,
+        control: account.control,
+        setSettings,
+        pattern: output,
+        menu: (
+          <DraftMenu
+            {...{
+              design,
+              pattern,
+              patternConfig,
+              settings,
+              ui,
+              update,
+              language,
+              account,
+              DynamicDocs,
+              inspector,
+              renderProps,
+              view,
+              setView,
+            }}
+          />
+        ),
+      }}
+    />
   )
 }
diff --git a/sites/shared/components/workbench/views/inspect/inspector/menu.mjs b/sites/shared/components/workbench/views/inspect/inspector/menu.mjs
index 52e81b6ca52..78be785f81e 100644
--- a/sites/shared/components/workbench/views/inspect/inspector/menu.mjs
+++ b/sites/shared/components/workbench/views/inspect/inspector/menu.mjs
@@ -123,7 +123,7 @@ const StackFinder = ({ renderProps, inspector, t }) => {
         <select
           className="select select-bordered w-full"
           onChange={findPath}
-          defaultvalue="__title"
+          defaultValue="__title"
         >
           <option disabled value="__title">
             Paths
diff --git a/sites/shared/components/workbench/views/inspect/menu.mjs b/sites/shared/components/workbench/views/inspect/menu.mjs
index 1341b657e24..e48b989e5db 100644
--- a/sites/shared/components/workbench/views/inspect/menu.mjs
+++ b/sites/shared/components/workbench/views/inspect/menu.mjs
@@ -38,7 +38,7 @@ export const DraftMenu = ({
   }
 
   return (
-    <nav className="grow mb-12">
+    <nav>
       <Inspector {...menuProps} {...{ ui, inspector, renderProps }} />
       <DesignOptions {...menuProps} />
       <CoreSettings {...menuProps} />
diff --git a/sites/shared/components/workbench/views/pattern-with-menu.mjs b/sites/shared/components/workbench/views/pattern-with-menu.mjs
new file mode 100644
index 00000000000..141ab179689
--- /dev/null
+++ b/sites/shared/components/workbench/views/pattern-with-menu.mjs
@@ -0,0 +1,37 @@
+import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
+import { ViewHeader, ns as headerNs } from './view-header.mjs'
+import { MenuWrapper } from 'shared/components/workbench/menus/shared/menu-wrapper.mjs'
+
+export const ns = headerNs
+
+export const PatternWithMenu = ({
+  settings,
+  ui,
+  update,
+  control,
+  title,
+  pattern,
+  menu,
+  setSettings,
+}) => (
+  <PanZoomContextProvider>
+    <div className="flex flex-col h-full">
+      <ViewHeader
+        {...{
+          settings,
+          ui,
+          update,
+          control,
+          setSettings,
+        }}
+      />
+      <div className="flex flex-col lg:flex-row grow max-h-[90vh] lg:my-4">
+        <div className="lg:w-2/3 flex flex-col h-full grow px-4">
+          {title}
+          {pattern}
+        </div>
+        {menu && <MenuWrapper>{menu}</MenuWrapper>}
+      </div>
+    </div>
+  </PanZoomContextProvider>
+)
diff --git a/sites/shared/components/workbench/views/print/index.mjs b/sites/shared/components/workbench/views/print/index.mjs
index 084db14845d..7af5e159e9f 100644
--- a/sites/shared/components/workbench/views/print/index.mjs
+++ b/sites/shared/components/workbench/views/print/index.mjs
@@ -12,9 +12,10 @@ import { defaultPrintSettings, printSettingsPath } from './config.mjs'
 import { PrintIcon, RightIcon } from 'shared/components/icons.mjs'
 import { LoadingContext } from 'shared/context/loading-context.mjs'
 import { useToast } from 'shared/hooks/use-toast.mjs'
+import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
 
 const viewNs = ['print', ...exportNs]
-export const ns = [...viewNs, ...menuNs]
+export const ns = [...viewNs, ...menuNs, ...wrapperNs]
 
 const PageCounter = ({ pattern }) => {
   const pages = pattern.setStores[0].get('pages', {})
@@ -40,6 +41,7 @@ export const PrintView = ({
   pattern,
   patternConfig,
   settings,
+  setSettings,
   ui,
   update,
   language,
@@ -85,15 +87,22 @@ export const PrintView = ({
   }
 
   return (
-    <div>
-      <div className="flex flex-row">
-        <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
-          <div className="flex justify-between items-baseline">
-            <h2 className="capitalize">
+    <PatternWithMenu
+      {...{
+        settings,
+        ui,
+        update,
+        control: account.control,
+        setSettings,
+        title: (
+          <div className="flex lg:justify-between items-baseline flex-wrap px-2">
+            <h2 className="text-center lg:text-left capitalize">
               {t('layoutThing', { thing: design }) + ' ' + t('forPrinting')}
             </h2>
             <PageCounter pattern={pattern} />
           </div>
+        ),
+        pattern: (
           <MovablePattern
             {...{
               renderProps,
@@ -103,8 +112,8 @@ export const PrintView = ({
               showButtons: !ui.hideMovableButtons,
             }}
           />
-        </div>
-        <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
+        ),
+        menu: (
           <PrintMenu
             {...{
               design,
@@ -119,8 +128,8 @@ export const PrintView = ({
               exportIt,
             }}
           />
-        </div>
-      </div>
-    </div>
+        ),
+      }}
+    />
   )
 }
diff --git a/sites/shared/components/workbench/views/print/menu.mjs b/sites/shared/components/workbench/views/print/menu.mjs
index 7ba4e988467..e2be895012e 100644
--- a/sites/shared/components/workbench/views/print/menu.mjs
+++ b/sites/shared/components/workbench/views/print/menu.mjs
@@ -34,7 +34,7 @@ export const PrintMenu = ({
     control,
   }
   return (
-    <nav className="grow mb-12">
+    <nav>
       <PrintActions {...menuProps} ui={ui} exportIt={exportIt} />
       <PrintSettings {...menuProps} ui={ui} />
       <DesignOptions {...menuProps} isFirst={false} />
diff --git a/sites/shared/components/workbench/views/test/index.mjs b/sites/shared/components/workbench/views/test/index.mjs
index 01087830c42..4f9703f1f75 100644
--- a/sites/shared/components/workbench/views/test/index.mjs
+++ b/sites/shared/components/workbench/views/test/index.mjs
@@ -1,10 +1,9 @@
 import { useTranslation } from 'next-i18next'
 import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
 import { TestMenu, ns as menuNs } from './menu.mjs'
-import { ViewHeader } from '../view-header.mjs'
-import { PanZoomContextProvider } from 'shared/components/workbench/pattern/pan-zoom-context.mjs'
+import { PatternWithMenu, ns as wrapperNs } from '../pattern-with-menu.mjs'
 
-export const ns = menuNs
+export const ns = [...menuNs, wrapperNs]
 
 export const TestView = ({
   design,
@@ -14,6 +13,7 @@ export const TestView = ({
   update,
   language,
   account,
+  setSettings,
   DynamicDocs,
 }) => {
   const { t } = useTranslation(ns)
@@ -26,39 +26,32 @@ export const TestView = ({
 
   const title = t('testThing', { design, thing: t(settings.sample?.[settings.sample.type]) })
   return (
-    <PanZoomContextProvider>
-      <div className="flex flex-col">
-        <ViewHeader
-          {...{
-            settings,
-            ui,
-            update,
-            control: account.control,
-          }}
-        />
-        <div className="flex flex-row ml-0 lg:ml-10">
-          <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
-            <h2 className="capitalize">{title}</h2>
-            <PanZoomPattern {...{ renderProps }} />
-          </div>
-          <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
-            <TestMenu
-              {...{
-                design,
-                pattern,
-                patternConfig,
-                settings,
-                ui,
-                update,
-                language,
-                account,
-                DynamicDocs,
-                renderProps,
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </PanZoomContextProvider>
+    <PatternWithMenu
+      {...{
+        settings,
+        ui,
+        update,
+        control: account.control,
+        setSettings,
+        title: <h2 className="px-2 capitalize">{title}</h2>,
+        pattern: <PanZoomPattern {...{ renderProps }} />,
+        menu: (
+          <TestMenu
+            {...{
+              design,
+              pattern,
+              patternConfig,
+              settings,
+              ui,
+              update,
+              language,
+              account,
+              DynamicDocs,
+              renderProps,
+            }}
+          />
+        ),
+      }}
+    />
   )
 }
diff --git a/sites/shared/components/workbench/views/test/menu.mjs b/sites/shared/components/workbench/views/test/menu.mjs
index ed6a258c1d1..234a1909e49 100644
--- a/sites/shared/components/workbench/views/test/menu.mjs
+++ b/sites/shared/components/workbench/views/test/menu.mjs
@@ -24,7 +24,7 @@ export const TestMenu = ({
   }
 
   return (
-    <nav className="grow mb-12">
+    <nav>
       <TestOptions {...menuProps} />
       <TestMeasurements {...menuProps} />
     </nav>
diff --git a/sites/shared/components/workbench/views/test/options.mjs b/sites/shared/components/workbench/views/test/options.mjs
index c37b6136040..da32ec6ebd7 100644
--- a/sites/shared/components/workbench/views/test/options.mjs
+++ b/sites/shared/components/workbench/views/test/options.mjs
@@ -21,7 +21,7 @@ export const SampleItem = ({ name, passProps, t, updateFunc }) => {
 
   return (
     <div
-      className={`collapse my-2 shadow border-solid border-l-[6px] min-h-10 rounded-none
+      className={`collapse my-2 shadow border-solid border-l-[6px] min-h-10 rounded-none w-full
          ${checked ? openClasses : closedClasses}`}
     >
       <input
diff --git a/sites/shared/components/workbench/views/view-header.mjs b/sites/shared/components/workbench/views/view-header.mjs
index 0960248b77c..fb019e24adb 100644
--- a/sites/shared/components/workbench/views/view-header.mjs
+++ b/sites/shared/components/workbench/views/view-header.mjs
@@ -77,17 +77,8 @@ export const ViewHeader = ({ update, settings, ui, control, setSettings }) => {
   const { t } = useTranslation(ns)
   return (
     <div
-      className={`flex sticky top-0 z-20 lg:${shownHeaderSelector}top-24 transition-[top] duration-300 ease-in-out drawer`}
+      className={`hidden lg:flex sticky top-0 z-20 lg:${shownHeaderSelector}top-24 transition-[top] duration-300 ease-in-out drawer`}
     >
-      <label htmlFor="view-header" className="btn btn-primary btn-circle m-2 swap">
-        <input type="checkbox" id="view-header" />
-        <span className="swap-off">
-          <WrenchIcon />
-        </span>
-        <span className="swap-on">
-          <CloseIcon />
-        </span>
-      </label>
       <div className="hidden lg:flex flex-row flex-wrap gap-4 py-4 pt-4 w-full bg-neutral text-neutral-content items-center justify-center">
         <ZoomButtons t={t} />
         <Spacer />
diff --git a/sites/shared/components/wrappers/modal.mjs b/sites/shared/components/wrappers/modal.mjs
index 9e1e386ef8c..22d89d4ae2b 100644
--- a/sites/shared/components/wrappers/modal.mjs
+++ b/sites/shared/components/wrappers/modal.mjs
@@ -67,7 +67,7 @@ export const ModalWrapper = ({
         children
       ) : (
         <div
-          className={`bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg max-h-full overflow-auto`}
+          className={`bg-base-100 p-4 lg:px-8 lg:rounded-lg lg:shadow-lg max-h-full overflow-auto grow`}
         >
           {children}
         </div>
diff --git a/sites/shared/components/wrappers/page.mjs b/sites/shared/components/wrappers/page.mjs
index a4812a20b46..10fcbb6ed23 100644
--- a/sites/shared/components/wrappers/page.mjs
+++ b/sites/shared/components/wrappers/page.mjs
@@ -33,7 +33,7 @@ export const PageWrapper = (props) => {
   /*
    * Contexts
    */
-  const { modalContent, modalProps } = useContext(ModalContext)
+  const { modalContent } = useContext(ModalContext)
   const { setNavigation, slug } = useContext(NavigationContext)
 
   /*
@@ -94,7 +94,7 @@ export const PageWrapper = (props) => {
         <LayoutWrapper {...childProps}>
           {Layout ? <Layout {...childProps}>{children}</Layout> : children}
         </LayoutWrapper>
-        {typeof modalContent === 'function' ? modalContent(modalProps) : modalContent}
+        {typeof modalContent === 'function' ? modalContent() : modalContent}
       </div>
     </SwipeWrapper>
   )
diff --git a/sites/shared/context/modal-context.mjs b/sites/shared/context/modal-context.mjs
index 68407e8ae64..e799531e143 100644
--- a/sites/shared/context/modal-context.mjs
+++ b/sites/shared/context/modal-context.mjs
@@ -7,7 +7,6 @@ export const ModalContextProvider = ({ children }) => {
     __setModal({
       ...__modal,
       modalContent: null,
-      modalProps: {},
     })
   }
 
@@ -15,23 +14,13 @@ export const ModalContextProvider = ({ children }) => {
     __setModal({
       ...__modal,
       modalContent: content,
-      modalProps: props,
-    })
-  }
-
-  function setModalProps(props = {}) {
-    __setModal({
-      ...__modal,
-      modalProps: props,
     })
   }
 
   const [__modal, __setModal] = useState({
     setModal,
     clearModal,
-    setModalProps,
     modalContent: null,
-    modalProps: {},
   })
 
   return <ModalContext.Provider value={__modal}>{children}</ModalContext.Provider>