fix(web-components): constrain portrait media to viewport height

Portrait screenshots and videos were stretched to full panel width,
making them impractical on wide screens. Apply max-height: 80vh with
auto width/height so landscape media still fills available width while
portrait media stays within the visible viewport.

Fixes #534

Author: todti

packages/web-classic/src/components/TestResult/TestResultSteps/attachmentVideo.tsx

@@ -1,14 +1,16 @@
 import { Spinner } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
 
+import * as styles from "./styles.scss";
+
 export const AttachmentVideo: FunctionalComponent<{
   attachment: { src: string; contentType?: string };
 }> = ({ attachment }) => {
   if (!attachment) {
     return <Spinner />;
   }
   return (
-    <video controls loop muted>
+    <video class={styles["test-result-attachment-video"]} controls loop muted>
       <source src={attachment?.src} type={attachment?.contentType} />
     </video>
   );

packages/web-classic/src/components/TestResult/TestResultSteps/styles.scss

@@ -159,9 +159,12 @@
   height: 100%;
 
   img {
-    width: 100%;
-    height: 100%;
-    object-fit: scale-down;
+    display: block;
+    max-width: 100%;
+    max-height: 80vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
   }
 }
 
@@ -228,3 +231,11 @@
 .html-attachment-preview {
   padding: 0 16px;
 }
+
+.test-result-attachment-video {
+  display: block;
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+}

packages/web-components/src/components/Attachment/styles.scss

@@ -157,7 +157,11 @@
   height: 100%;
 
   img {
-    width: 100%;
+    display: block;
+    max-width: 100%;
+    max-height: 80vh;
+    width: auto;
+    height: auto;
     object-fit: contain;
   }
 }
@@ -236,7 +240,11 @@
 }
 
 .test-result-attachment-video {
-  width: 100%;
+  display: block;
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
 }
 
 .imageDiffWrapper {