feat(shared): Let images break out to fill the screen on mobile

packages/freesewing.shared/components/breadcrumbs.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
-import Logo from 'shared/components/logos/freesewing.js'
+import FreeSewingIcon from 'shared/components/icons/freesewing.js'
 
 const Breadcrumbs = ({ crumbs=[], title }) => (
   <ul className="flex flex-row flex-wrap gap-2 font-bold">
     <li>
       <Link href="/">
         <a title="FreeSewing" className="text-base-content">
-          <Logo size={24} fill="currentColor" stroke={false}/>
+          <FreeSewingIcon />
         </a>
       </Link>
     </li>

packages/freesewing.shared/components/lightbox.js

@@ -1,15 +1,15 @@
 import { useState } from 'react'
 
-const Modal = ({ cancel, children }) => {
+const Lightbox = ({ cancel, children }) => {
 
-  const [ modal, setModal ] = useState(false)
+  const [ box, setBox ] = useState(false)
 
-  if (modal) return (
+  if (box) return (
     <div className={`
       fixed top-0 left-0 right-0 w-screen h-screen
       bg-neutral bg-opacity-90 z-30
       hover:cursor-zoom-out flex flex-col justify-center
-      `} onClick={() => setModal(false)}>
+      `} onClick={() => setBox(false)}>
         <div className="m-auto text-neutral-content lightbox" style={{
           maxHeight: "calc(100vh - 6rem)",
           maxWidth: "calc(100vw - 6rem)",
@@ -21,10 +21,10 @@ const Modal = ({ cancel, children }) => {
 
   return (
     <div
-      onClick={() => setModal(!modal)}
+      onClick={() => setBox(!box)}
       className="hover:cursor-zoom-in"
     >{children}</div>
   )
 }
 
-export default Modal
+export default Lightbox

packages/freesewing.shared/components/mdx/figure.js

@@ -1,5 +1,6 @@
 import Popout from 'shared/components/popout'
-import Modal from 'shared/components/modal'
+import Lightbox from 'shared/components/lightbox'
+import ImageWrapper from 'shared/components/wrappers/img.js'
 
 const Figure = props => {
 
@@ -11,17 +12,15 @@ const Figure = props => {
 
   return (
     <figure className="block my-4">
-      <Modal>
-        <img
-          src={props?.src}
-          alt={props?.alt || ''}
-          title={title || ''}
-          className="m-auto"
-          style={{
-            maxHeight: "calc(100vh - 6rem)",
-            maxWidth: "calc(100vw - 6rem)",
-          }}
-        />
+      <Lightbox>
+        <ImageWrapper>
+          <img
+            src={props?.src}
+            alt={props?.alt || ''}
+            title={title || ''}
+            className="m-auto"
+          />
+        </ImageWrapper>
         {title
           ? <figcaption className="text-center italic mt-1">{title}</figcaption>
           : (
@@ -31,7 +30,7 @@ const Figure = props => {
             </Popout>
           )
         }
-      </Modal>
+      </Lightbox>
     </figure>
   )
 }

packages/freesewing.shared/components/wrappers/img.js

@@ -0,0 +1,7 @@
+/* Breaks image out of its parent container to fill the screen on mobile */
+const ImageWrapper = ({ children }) => (
+  <div className="-ml-8 -mr-8 sm:m-0">{children}</div>
+)
+
+export default ImageWrapper
+