From 12f6b619f3ea3947291caf4e8a5b1adfea3bbf4c Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 20 Jun 2024 16:42:08 +0100
Subject: [PATCH] fix: Image upload stretch and design settings

---
 .../Settings/DesignSettings/index.tsx         |  2 ++
 editor.planx.uk/src/ui/editor/ImgInput.tsx    | 24 +++++++++++++------
 2 files changed, 19 insertions(+), 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
index 4432b3d39c..8c3bd88565 100644
--- 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
index 6134c3b829..90d3216d9c 100644
--- 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">