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")}
)}