From 05120105851750ffb24718809f683fb2eebbc9eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alfred=20B=C3=B6sch?= <alfred.boesch@bsb-muenchen.de>
Date: Thu, 2 Dec 2021 09:23:19 +0100
Subject: [PATCH] Change size legend from float to flex

---
 src/components/CroppingDialog.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/CroppingDialog.js b/src/components/CroppingDialog.js
index 33e7807..b587d00 100644
--- a/src/components/CroppingDialog.js
+++ b/src/components/CroppingDialog.js
@@ -48,6 +48,8 @@ const useStyles = makeStyles((theme) => ({
   },
   legend: {
     width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
   },
   optionsHeading: {
     marginBottom: theme.spacing(1),
@@ -63,10 +65,6 @@ const useStyles = makeStyles((theme) => ({
   previewLink: {
     fontFamily: "sans-serif",
   },
-  sliderValue: {
-    display: "block",
-    float: "right",
-  },
 }));
 
 const supportsClipboard = "clipboard" in navigator;
@@ -106,7 +104,6 @@ const CroppingDialog = ({
     previewHeading,
     previewImage,
     previewLink,
-    sliderValue,
   } = useStyles();
   if (
     !enabled ||
@@ -196,8 +193,7 @@ const CroppingDialog = ({
         </Typography>
         <FormControl component="fieldset" fullWidth>
           <FormLabel component="legend" className={legend}>
-            {t("imageCropper.size")}{" "}
-            <span className={sliderValue}>{size}%</span>
+            {t("imageCropper.size")} <span>{size}%</span>
           </FormLabel>
           <Slider min={1} onChange={(_evt, s) => setSize(s)} value={size} />
         </FormControl>