UX: avoid small viewport squishing rich editor image (#33567)

Lets the height be automatic instead of enforcing the calculated value.

Before
<img width="300" height="247" alt="image"
src="https://github.com/user-attachments/assets/6566f3ba-44aa-446c-b773-94bbdd7f505d"
/>

After
<img width="296" height="244" alt="image"
src="https://github.com/user-attachments/assets/9c7eb257-4810-4aab-bdfe-9ad7ec8d0a0b"
/>

app/assets/javascripts/discourse/app/static/prosemirror/components/image-node-view.gjs

@@ -271,23 +271,14 @@ export default class ImageNodeView extends Component {
   }
 
   get imageStyle() {
-    let width = this.args.node.attrs.width;
-    let height = this.args.node.attrs.height;
-
-    if (!width || !height) {
-      const dimensions = this.maxDimensions;
-
-      if (!dimensions) {
-        return null;
-      }
-
-      width = dimensions.width;
-      height = dimensions.height;
+    const width = this.args.node.attrs.width ?? this.maxDimensions?.width;
+    if (!width) {
+      return null;
     }
 
     const scale = (this.args.node.attrs.scale || 100) / 100;
 
-    return htmlSafe(`width: ${width * scale}px; height: ${height * scale}px;`);
+    return htmlSafe(`width: ${width * scale}px`);
   }
 
   @action

app/assets/javascripts/discourse/tests/integration/components/prosemirror-editor/image-test.js

@@ -74,11 +74,6 @@ module(
             "50px",
             "Image width style should be 50px"
           );
-          assert.strictEqual(
-            img.style.height,
-            "100px",
-            "Image height style should be 100px"
-          );
         }
       )
     );
@@ -105,11 +100,6 @@ module(
             "50px",
             "Image width style should be 50px"
           );
-          assert.strictEqual(
-            img.style.height,
-            "100px",
-            "Image height style should be 100px"
-          );
         }
       )
     );

app/assets/stylesheets/common/rich-editor/rich-editor.scss

@@ -49,31 +49,20 @@
     font-size: var(--font-up-1-rem);
   }
 
-  img {
-    display: inline-block;
-    height: auto;
-    max-width: 100%;
-    border-radius: var(--d-border-radius);
+  img[data-placeholder="true"] {
+    animation: placeholder 1.5s infinite;
 
-    &.emoji {
-      border-radius: 0;
-    }
+    @keyframes placeholder {
+      0% {
+        opacity: 0.6;
+      }
 
-    &[data-placeholder="true"] {
-      animation: placeholder 1.5s infinite;
+      50% {
+        opacity: 0.4;
+      }
 
-      @keyframes placeholder {
-        0% {
-          opacity: 0.6;
-        }
-
-        50% {
-          opacity: 0.4;
-        }
-
-        100% {
-          opacity: 0.6;
-        }
+      100% {
+        opacity: 0.6;
       }
     }
   }
@@ -315,6 +304,10 @@
   padding: 2px 1px;
 
   img {
+    display: inline-block;
+    height: auto;
+    max-width: 100%;
+    border-radius: var(--d-border-radius);
     transition:
       width 0.2s ease,
       height 0.2s ease;