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/base-layout.mjs

@@ -2,7 +2,7 @@
  * The default full-page FreeSewing layout
  */
 export const BaseLayout = ({ children = [] }) => (
-  <div className="flex flex-row items-start mt-8 w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
+  <div className="flex flex-row items-start w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
     {children}
   </div>
 )
@@ -11,26 +11,26 @@ export const BaseLayout = ({ children = [] }) => (
  * The left column of the default layout
  */
 export const BaseLayoutLeft = ({ children = [] }) => (
-  <div className="max-w-96 w-1/4 mt-8 hidden lg:block shrink-0">{children}</div>
+  <div className="max-w-96 w-1/4 hidden lg:block shrink-0 my-8">{children}</div>
 )
 
 /*
  * The right column of the default layout
  */
 export const BaseLayoutRight = ({ children = [] }) => (
-  <div className="max-w-96 w-1/4 mt-8 hidden xl:block">{children}</div>
+  <div className="max-w-96 w-1/4 hidden xl:block my-8">{children}</div>
 )
 
 /*
  * The main column for prose (text like docs and so on)
  */
 export const BaseLayoutProse = ({ children = [] }) => (
-  <div className="grow w-full m-auto max-w-prose mt-0 mb-8">{children}</div>
+  <div className="grow w-full m-auto max-w-prose my-8">{children}</div>
 )
 
 /*
  * The central column for wide content (no max-width)
  */
 export const BaseLayoutWide = ({ children = [] }) => (
-  <div className="grow w-full m-auto mt-0 mb-8 grow">{children}</div>
+  <div className="grow w-full m-auto my-8 grow">{children}</div>
 )