use aspect ratio rather than height

Author: Brookke

src/components/STLViewer.tsx

@@ -52,11 +52,12 @@ export interface Props {
   rotationZ?: number;
   className?: string;
   color?: string;
+  aspectRatio?: string;
 }
 
 export default function STLViewer({
   modelPath,
-  height = "400px",
+  aspectRatio = "1 / 1",
   cameraDistance = 2,
   cameraHeight = 45,
   autoRotate = true,
@@ -72,8 +73,7 @@ export default function STLViewer({
       className={className}
       style={{
         width: "100%",
-        maxWidth: "800px",
-        height,
+        aspectRatio: aspectRatio,
         margin: "2rem auto",
         borderRadius: "8px",
         overflow: "hidden",

src/content/blog/2025-12-27-3d-printer.mdx

@@ -60,7 +60,6 @@ _By: [MarcusP Printables](https://www.printables.com/model/3464-apple-watch-stan
 <STLViewer
   client:visible
   modelPath="/models/other/apple-watch-stand.stl"
-  height="400px"
   rotationX={Math.PI * 1.5}
   cameraDistance={200}
 />
@@ -71,7 +70,6 @@ _[Touch Mapper](https://touch-mapper.org/en/)_
 <STLViewer
   client:visible
   modelPath="/models/other/map.stl"
-  height="500px"
   rotationX={Math.PI * 1.5}
   rotationZ={Math.PI}
   cameraDistance={300}
@@ -85,7 +83,6 @@ _By: [NotSure](https://www.printables.com/model/968016-ikea-raskog-sorter) and [
 <STLViewer
   client:visible
   modelPath="/models/other/ikea-raskog.stl"
-  height="400px"
   rotationX={-Math.PI * 1.5}
   cameraHeight={300}
   cameraDistance={200}
@@ -101,7 +98,6 @@ _By: [motherfucker - cults3d](https://cults3d.com/en/3d-model/various/side-load-
 <STLViewer
   client:visible
   modelPath="/models/other/bottle-cage.stl"
-  height="400px"
   rotationX={Math.PI * 1.5}
   rotationZ={Math.PI}
   cameraDistance={300}
@@ -119,7 +115,6 @@ _By: Brooke Hatton_
 <STLViewer
   client:visible
   modelPath="/models/brooke/helmet-hook.stl"
-  height="300px"
   rotationX={Math.PI * 1.5}
   rotationZ={Math.PI * 1.5}
   cameraDistance={200}
@@ -134,7 +129,6 @@ _By: Brooke Hatton_
 <STLViewer
   client:visible
   modelPath="/models/brooke/maisie-hook.stl"
-  height="300px"
   rotationX={Math.PI * 1.5}
   rotationZ={Math.PI}
   cameraDistance={150}
@@ -149,7 +143,6 @@ _By: Brooke Hatton_
 <STLViewer
   client:visible
   modelPath="/models/brooke/dehumidifier-cable-wrap.stl"
-  height="400px"
   rotationX={Math.PI * 1.5}
   rotationZ={Math.PI}
   cameraDistance={180}
@@ -164,7 +157,6 @@ _By: Brooke Hatton_
 <STLViewer
   client:visible
   modelPath="/models/brooke/family-figures-box.stl"
-  height="500px"
   rotationX={Math.PI * 1.5}
   cameraHeight={300}
   rotationZ={Math.PI}
@@ -181,7 +173,6 @@ _By: Brooke Hatton_
 <STLViewer
   client:visible
   modelPath="/models/brooke/ortlieb-webbing.stl"
-  height="300px"
   rotationZ={Math.PI}
   cameraDistance={50}
 />
@@ -195,7 +186,6 @@ _By: Brooke Hatton_
 <STLViewer
   client:visible
   modelPath="/models/brooke/airer-foot.stl"
-  height="300px"
   rotationX={Math.PI * 1.5}
   rotationZ={Math.PI}
   cameraDistance={100}

src/styles/global.css

@@ -64,7 +64,7 @@ h4 {
 
 p,
 ul,
-ol ul {
+ol ul, img {
   margin-bottom: 1.5rem;
 }