From 7f63892a3c8e32ea7a45ee6905c23751cc8ceac8 Mon Sep 17 00:00:00 2001
From: Wojciech Nawrocki <wjnawrocki@protonmail.com>
Date: Mon, 27 Nov 2023 22:20:13 -0500
Subject: [PATCH] fix: embed positioning

---
 widget/src/penroseCanvas.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/widget/src/penroseCanvas.tsx b/widget/src/penroseCanvas.tsx
index 83ecea4..1d60441 100644
--- a/widget/src/penroseCanvas.tsx
+++ b/widget/src/penroseCanvas.tsx
@@ -394,6 +394,9 @@ export function PenroseCanvas(props: PenroseCanvasProps): JSX.Element {
     })
   }, [containerWidth, embedsData, variation, props.trio.sub, props.trio.sty, props.trio.dsl])
 
+  // `relative` makes the outer `div` a
+  // [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
+  // for `absolute`ly positioned children.
   let cn = 'relative'
   // Decrease opacity when loading or updating.
   if (state.tag !== 'drawn' && state.tag !== 'error')
@@ -404,13 +407,14 @@ export function PenroseCanvas(props: PenroseCanvasProps): JSX.Element {
   return <div className={cn} ref={containerRef}>
     {diag &&
       <>
-        <a className='fr link pointer dim codicon codicon-refresh'
-          onClick={() => setVariation(Math.random().toString())} />
         <div ref={ref => {
             if (!ref) return
             if (ref.firstChild) ref.replaceChild(diag.svg, ref.firstChild)
             else ref.appendChild(diag.svg)
           }} />
+        {/* `absolute` positioning` relative to the outer `div` */}
+        <a className='absolute top-0 right-0 link pointer dim codicon codicon-refresh'
+          onClick={() => setVariation(Math.random().toString())} />
       </>
       }
     {!diag && state.tag === 'loading' && <>Loading..</>}