chore(shared): Changes kiosk/expand/flags/header

- Revamped the flags ui to be consistent with the rest
- The expand setting is on by default now. Tweaks to its dialog and
  header
- Added a new kiosk mode that will use the entire screen for the
  workbench
- Got rid of the auto-hiding behaviour of the header which gets annoying
  quick

sites/shared/components/wrappers/header.mjs

@@ -1,24 +1,11 @@
-export const HeaderWrapper = ({ show, children }) => (
+export const HeaderWrapper = ({ children }) => (
   <header
     className={`
-    fixed bottom-0 md:bottom-auto md:top-0 left-0
-    bg-neutral
-    w-full
-    z-30
-    transition-transform
-    duration-300 ease-in-out
-    ${show ? '' : 'translate-y-36 md:-translate-y-36'}
-    drop-shadow-xl
+    fixed bottom-0 left-0 md:relative
+    bg-neutral drop-shadow-xl w-full
+    border-t border-solid border-base-300 z-20
   `}
   >
-    {' '}
     {children}
   </header>
 )
-
-// can't use string interpolation or tailwind won't account for these classes
-const shownHeaderClasses = {
-  'bottom-16': 'group-[.header-shown]/layout:bottom-16',
-  'md:top-24': 'group-[.header-shown]/layout:md:top-24',
-}
-export const shownHeaderSelector = (cls) => shownHeaderClasses[cls]