fix(site-builder): bounce stays visible + springier; image/video crop fills (cover) + resize shrinks footprint

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/panels/right/styles/ImageStylePanel.tsx

@@ -25,6 +25,19 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
 
   const { setProp, setPropStyle } = useNodeProp(selectedId);
 
+  // Applying an aspect-ratio crop should FILL the frame by default (object-fit:
+  // cover) rather than leave letterboxed empty bands, and width + ratio + cover
+  // fully determine the box -- so a stale `height` can't linger and conflict
+  // (kills the %-height no-op that made resize look like it wasn't working).
+  // Clearing the ratio (back to 'Original') leaves objectFit as the user left it.
+  const applyAspectRatio = (v: string) => {
+    setPropStyle('aspectRatio', v);
+    if (v) {
+      if (!style.objectFit) setPropStyle('objectFit', 'cover');
+      setPropStyle('height', '');
+    }
+  };
+
   return (
     <>
       {/* Image source */}
@@ -54,18 +67,24 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
         value={(style.maxWidth as string) || ''}
         onChange={(v) => setPropStyle('maxWidth', v)}
       />
-      <SizeControl
-        label="Height"
-        value={(style.height as string) || ''}
-        onChange={(v) => setPropStyle('height', v)}
-      />
+      {/* Height is only meaningful when there's no aspect-ratio crop -- once a
+          ratio is set, Width + ratio + cover fully determine the box, so a
+          separate Height control would only conflict/mislead (see
+          applyAspectRatio, which clears any stale height at that moment). */}
+      {!style.aspectRatio && (
+        <SizeControl
+          label="Height"
+          value={(style.height as string) || ''}
+          onChange={(v) => setPropStyle('height', v)}
+        />
+      )}
 
       {/* Crop & Framing -- aspect-ratio + object-fit + object-position on the
           <img> itself is a CSS framing crop (no server-side image processing
           needed). */}
       <AspectRatioControl
         value={(style.aspectRatio as string) || ''}
-        onChange={(v) => setPropStyle('aspectRatio', v)}
+        onChange={applyAspectRatio}
       />
       <div className="guided-section">
         <SectionLabel>Object Fit</SectionLabel>