Merge branch 'main' into translate-variables-hi

Author: ksen0

src/components/CodeEmbed/index.jsx

@@ -44,14 +44,23 @@ export const CodeEmbed = (props) => {
     previewHeight = previewHeight || parseFloat(canvasMatch[2]);
   }
 
-  const largeSketch = previewWidth && previewWidth > 770 - 60;
-
   // Quick hack to make room for DOM that gets added below the canvas by default
   const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(initialCode);
   if (domMatch && previewHeight) {
     previewHeight += 100;
   }
 
+  // Fallback preview size when no usable canvas dimensions are detected.
+  // Ensures DOM-based examples (e.g., createCapture with noCanvas) are visible.
+  const DEFAULT_PREVIEW_WIDTH = 400;
+  const DEFAULT_PREVIEW_HEIGHT = 300;
+  if (previewWidth === undefined || previewHeight === undefined) {
+    previewWidth = previewWidth ?? DEFAULT_PREVIEW_WIDTH;
+    previewHeight = previewHeight ?? DEFAULT_PREVIEW_HEIGHT;
+  }
+
+  const largeSketch = previewWidth && previewWidth > 770 - 60;
+
   const codeFrameRef = useRef(null);
 
   const updateOrReRun = () => {

src/components/Dropdown/index.tsx

@@ -152,8 +152,8 @@ export const Dropdown = ({
           </div>
           <button
             onClick={() => handleOptionClick(option)}
-            ref={el => {
-              optionRefs.current[index] = el as HTMLButtonElement
+            ref={(el) => {
+              optionRefs.current[index] = el as HTMLButtonElement;
             }}
             onBlur={handleBlur}
           >

src/components/PageHeader/HomePage.astro

@@ -10,7 +10,7 @@ const { config } = Astro.props;
 
 ---
 
-<div class="px-lg pt-[11.25rem] lg:pt-3xl pb-0 h-full">
+<div class="max-lg:flex max-lg:flex-col px-lg pt-[11.25rem] lg:pt-3xl pb-0 h-full">
   <div class="homepage-header-top">
     <div class="grid grid-cols-3 lg:grid-cols-4 gap-md overflow-visible h-min">
       <p class="col-span-2 lg:col-span-3 mt-0 text-md md:text-xl lg:text-3xl">
@@ -39,7 +39,7 @@ const { config } = Astro.props;
   {
     config.data.heroImages.map((im, i) => (
       im.linkTarget ?
-      <a href={im.linkTarget} class={`hero-image-container ${i > 0 ? "hidden" : ""}`}>
+      <a href={im.linkTarget} class={`max-lg:flex-1 max-lg:min-h-0 hero-image-container ${i > 0 ? "hidden" : ""}`}>
       <Image
           containerClass={"relative"}
           class={"hero-image"}
@@ -51,7 +51,7 @@ const { config } = Astro.props;
       </a>
       :
       <Image
-          containerClass={`relative hero-image-container ${i > 0 ? "hidden" : ""}`}
+          containerClass={`max-lg:flex-1 max-lg:min-h-0 relative hero-image-container ${i > 0 ? "hidden" : ""}`}
           class={"hero-image"}
           aspectRatio="none"
           src={im.image}