fix(files): preserve native non-pixel image heights

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-resize.test.tsx

@@ -161,6 +161,27 @@ describe('ResizableImageView', () => {
     expect(image.style.height).toBe('100px')
   })
 
+  it.each(['50%', 'auto', '10em', 'calc(50% - 10px)', 'min-content', 'inherit'])(
+    'preserves the native height-only CSS value %s before and after loading',
+    (height) => {
+      renderImage(vi.fn(), { height })
+      const image = host.querySelector<HTMLImageElement>('img')!
+      expect(image.style.width).toBe('')
+      expect(image.style.height).toBe(height)
+      expect(image.style.maxHeight).toBe('')
+
+      Object.defineProperties(image, {
+        naturalWidth: { configurable: true, value: 400 },
+        naturalHeight: { configurable: true, value: 200 },
+      })
+      act(() => image.dispatchEvent(new Event('load')))
+
+      expect(image.style.width).toBe('')
+      expect(image.style.height).toBe(height)
+      expect(image.style.maxHeight).toBe('')
+    }
+  )
+
   it('commits one proportional width change and clears a stale explicit height', () => {
     const updateAttributes = vi.fn()
     const handle = renderImage(updateAttributes)

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx

@@ -135,6 +135,7 @@ export function ResizableImageView({
   // stored value is stale (e.g. left over after the file's content was replaced) — so it wins once
   // available; stored metadata only reserves the box pre-load. Equal in the common case, so no shift.
   const intrinsicDimensions = measuredDimensions ?? storedDimensions
+  const hasPixelHeight = committedHeight !== undefined && PIXEL_SIZE.test(committedHeight)
   const authoredDimensions =
     committedWidth &&
     committedHeight &&
@@ -150,7 +151,7 @@ export function ResizableImageView({
     dragWidth !== null
       ? `${dragWidth}px`
       : (committedWidth ??
-        (intrinsicDimensions
+        (intrinsicDimensions && (!committedHeight || hasPixelHeight)
           ? committedHeight
             ? `calc(${committedHeight} * ${intrinsicDimensions.width / intrinsicDimensions.height})`
             : `${intrinsicDimensions.width}px`
@@ -161,8 +162,11 @@ export function ResizableImageView({
   const imageStyle: CSSProperties = {
     width: displayWidth,
     height:
-      dragWidth === null && committedWidth && !authoredDimensions ? committedHeight : undefined,
-    maxHeight: dragWidth === null && !committedWidth ? committedHeight : undefined,
+      dragWidth === null && !authoredDimensions && (committedWidth || !hasPixelHeight)
+        ? committedHeight
+        : undefined,
+    maxHeight:
+      dragWidth === null && !committedWidth && hasPixelHeight ? committedHeight : undefined,
     aspectRatio: displayDimensions
       ? `${displayDimensions.width} / ${displayDimensions.height}`
       : undefined,