diff --git a/src/renderer/screens/Editor/Sidebar/Overview.js b/src/renderer/screens/Editor/Sidebar/Overview.js index 75578e0be..c74ab67c2 100644 --- a/src/renderer/screens/Editor/Sidebar/Overview.js +++ b/src/renderer/screens/Editor/Sidebar/Overview.js @@ -47,6 +47,7 @@ const Overview = (props) => { const { keymap, selectedKey, selectedLed, layer, colormap, layerNames } = props; const db = new KeymapDB(); + const fontSize = "0.6rem"; const componentWidth = 200; // Assume a fixed width for the component const [defaultPosition, setDefaultPosition] = useState({ x: 0, y: 0 }); @@ -103,6 +104,7 @@ const Overview = (props) => { aria-haspopup="true" onClick={handleClick} sx={{ + height: fontSize, opacity: open ? 1 : 0.1, // Full opacity when open, faded otherwise transition: "opacity 0.3s ease", // Smooth transition for the opacity "&:hover": { @@ -158,13 +160,13 @@ const Overview = (props) => { > {props.setLayerName ? ( - + ) : ( - {layerNames.names[index]} + {layerNames.names[index]} )} - + {label.hint} {label.main} @@ -199,16 +201,16 @@ const Overview = (props) => { - {t("components.layerRaw")} + {t("components.layerRaw")} - + {t("editor.overview.key", { index: selectedKey })} {showColors && ( theme.spacing(3) }}> - {t("editor.overview.color")} + {t("editor.overview.color")} )}