Change size legend from float to flex

dbmdz · Dec 2, 2021 · 0512010 · 0512010
1 parent 791904f
commit 0512010
Showing 1 changed file with 3 additions and 7 deletions.
diff --git 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>