Merge pull request #201 from DiamondLightSource/fix-webcam-css

Fix Webcam css

Author: abigailalexander

src/ui/widgets/Image/image.module.css

@@ -0,0 +1,9 @@
+.Image {
+    max-width: 100%;
+    min-width:100%;
+    min-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    overflow: hidden;
+}

src/ui/widgets/Image/image.tsx

@@ -14,6 +14,7 @@ import {
   ColorPropOpt
 } from "../propTypes";
 import { registerWidget } from "../register";
+import classes from "./image.module.css";
 import { Box } from "@mui/material";
 
 const widgetName = "image";
@@ -86,6 +87,7 @@ export const ImageComponent = (
   return (
     <Box sx={fullStyle} onClick={onClick}>
       <img
+        className={classes.Image}
         src={imageFileName}
         alt={props.alt || undefined}
         style={{

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (using fallback symbol) 1`
     class="MuiBox-root css-lj78bd"
   >
     <img
+      class="_Image_171889"
       src="img 1.gif"
       style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
@@ -19,6 +20,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (with index) 1`] = `
     class="MuiBox-root css-lj78bd"
   >
     <img
+      class="_Image_171889"
       src="img 3.svg"
       style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
@@ -32,6 +34,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (with rotation) 1`] = `
     class="MuiBox-root css-lj78bd"
   >
     <img
+      class="_Image_171889"
       src="img 1.gif"
       style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
@@ -45,6 +48,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (without index) 1`] = `
     class="MuiBox-root css-lj78bd"
   >
     <img
+      class="_Image_171889"
       src="img 1.gif"
       style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
@@ -58,6 +62,7 @@ exports[`<Symbol /> from .opi file > matches snapshot (with rotation) 1`] = `
     class="MuiBox-root css-lj78bd"
   >
     <img
+      class="_Image_171889"
       src="img 1.gif"
       style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
@@ -71,6 +76,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
     class="MuiBox-root css-lj78bd"
   >
     <img
+      class="_Image_171889"
       src="img 1.gif"
       style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />

src/ui/widgets/Webcam/webcam.module.css

@@ -1,4 +1,4 @@
-img {
+.Webcam {
     max-width: 100%;
     min-width:100%;
     min-height: 100%;

src/ui/widgets/Webcam/webcam.tsx

@@ -36,7 +36,7 @@ export const WebcamComponent = (
     >
       <img
         id={props.name}
-        className={classes.img}
+        className={classes.Webcam}
         src={props.url}
         alt={`Loading Webcam MJPEG stream...`}
         onError={onError}