From 137dcc675d7fb93cf778c54722afb7c7ed24427f Mon Sep 17 00:00:00 2001
From: Bradlee Speice <bradlee@speice.io>
Date: Wed, 4 Dec 2024 22:45:48 -0500
Subject: [PATCH] Fix color swatch paint area

Still hate the code, but at least it's sized correctly now
---
 .../3-log-density/FlameColor.tsx                             | 3 ++-
 blog/2024-11-15-playing-with-fire/3-log-density/index.mdx    | 4 ++--
 blog/2024-11-15-playing-with-fire/src/Canvas.tsx             | 5 +----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
index c125281..5064ebf 100644
--- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
+++ b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
@@ -45,6 +45,7 @@ const AutoSizingCanvas: React.FC<AutoSizingCanvasProps> = ({painter}) => {
 
     useEffect(() => {
         if (sizingRef) {
+            console.log(`Sizing; width=${sizingRef.current.offsetWidth} height=${sizingRef.current.offsetHeight}`)
             setWidth(sizingRef.current.offsetWidth);
             setHeight(sizingRef.current.offsetHeight)
         }
@@ -53,7 +54,7 @@ const AutoSizingCanvas: React.FC<AutoSizingCanvasProps> = ({painter}) => {
     const image: [ImageData] = useMemo(() => (width && height) ? [painter(width, height)] : null, [painter, width, height]);
 
     return (
-        <div ref={sizingRef}><InvertibleCanvas width={width} height={height} image={image}/></div>
+        <div ref={sizingRef} style={{width: '100%', height: '100%'}}><InvertibleCanvas width={width} height={height} image={image}/></div>
     )
 }
 
diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx
index df0efa2..b4d552c 100644
--- a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx
+++ b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx
@@ -32,13 +32,13 @@ import Canvas from "../src/Canvas";
 import FlameHistogram from "./FlameHistogram";
 import {paintLinear} from "./paintLinear";
 
-<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas> -->
+<Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas>
 
 ## Log display
 
 import {paintLogarithmic} from './paintLogarithmic'
 
-<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas> -->
+<Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas>
 
 ## Color
 
diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
index e4b8fbe..41c851a 100644
--- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
+++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx
@@ -53,10 +53,7 @@ export const InvertibleCanvas: React.FC<InvertibleCanvasProps> = ({width, height
             ref={canvasRef}
             width={width}
             height={height}
-            style={{
-                aspectRatio: width / height,
-                width: '75%'
-            }}
+            style={{aspectRatio: width / height}}
         />
     )
 }