fix: Image upload stretch and design settings (#3306)

theopensystemslab · Jun 20, 2024 · fd6112e · fd6112e
1 parent 3e06283
commit fd6112e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx
@@ -22,6 +22,8 @@ export const DesignPreview = styled(Box)(({ theme }) => ({
   border: `2px solid ${theme.palette.border.input}`,
   padding: theme.spacing(2),
   boxShadow: "4px 4px 0px rgba(150, 150, 150, 0.5)",
+  display: "flex",
+  justifyContent: "center",
 }));
 
 export const EXAMPLE_COLOUR = "#007078";

diff --git a/editor.planx.uk/src/ui/editor/ImgInput.tsx b/editor.planx.uk/src/ui/editor/ImgInput.tsx
@@ -27,6 +27,14 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
   marginLeft: theme.spacing(0.5),
 }));
 
+const ImageWrapper = styled(Box)(() => ({
+  width: 50,
+  height: 50,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+}));
+
 /** Uploads an image and returns corresponding URL */
 export default function ImgInput({
   img,
@@ -86,13 +94,15 @@ export default function ImgInput({
           Remove
         </MenuItem>
       </Menu>
-      <img
-        width={50}
-        height={50}
-        src={img}
-        alt="embedded img"
-        style={{ display: "block", backgroundColor: backgroundColor }}
-      />
+      <ImageWrapper sx={{ backgroundColor: backgroundColor }}>
+        <img
+          width={44}
+          height={44}
+          src={img}
+          alt="embedded img"
+          style={{ display: "block", height: "auto" }}
+        />
+      </ImageWrapper>
     </ImageUploadContainer>
   ) : (
     <Tooltip title="Drop file here">