fixup! ui-speedspacechart: fix-detailsbox-display

Author: Yohh

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -90,7 +90,7 @@ const SpeedSpaceChart = ({
   const dynamicHeightOffset = getAdaptiveHeight(HEIGHT_OFFSET, store.layersDisplay);
 
   const [showDetailsBox, setShowDetailsBox] = useState(false);
-  const [showReticleLayer, setShowReticleLayer] = useState(true);
+  const [mouseIsOverSettingsPanel, setMouseIsOverSettingsPanel] = useState(true);
 
   const reset = () => {
     setStore((prev) => ({
@@ -146,7 +146,7 @@ const SpeedSpaceChart = ({
             color={backgroundColor}
             store={store}
             setStore={setStore}
-            setShowReticleLayer={setShowReticleLayer}
+            setMouseIsOverSettingsPanel={setMouseIsOverSettingsPanel}
             translations={translations}
           />
         </div>
@@ -182,7 +182,7 @@ const SpeedSpaceChart = ({
         />
       )}
       <TickLayerX width={width} height={dynamicHeight} store={store} />
-      {showReticleLayer && (
+      {mouseIsOverSettingsPanel && (
         <ReticleLayer
           width={width}
           height={dynamicHeight}

ui-speedspacechart/src/components/common/SettingsPanel.tsx

@@ -10,19 +10,19 @@ type SettingsPanelProps = {
   color: string;
   store: Store;
   setStore: React.Dispatch<React.SetStateAction<Store>>;
-  setShowReticleLayer: React.Dispatch<React.SetStateAction<boolean>>;
+  setMouseIsOverSettingsPanel: React.Dispatch<React.SetStateAction<boolean>>;
   translations?: SpeedSpaceChartProps['translations'];
 };
 
 const SettingsPanel = ({
   color,
   store,
   setStore,
-  setShowReticleLayer,
+  setMouseIsOverSettingsPanel,
   translations,
 }: SettingsPanelProps) => {
   const closeSettingsPanel = () => {
-    setShowReticleLayer(true);
+    setMouseIsOverSettingsPanel(true);
     setStore((prev) => ({
       ...prev,
       isSettingsPanelOpened: false,
@@ -34,8 +34,8 @@ const SettingsPanel = ({
       id="settings-panel"
       style={{ background: `rgba(${color.substring(4, color.length - 1)}, 0.4)` }}
       className="font-sans"
-      onMouseMove={() => setShowReticleLayer(false)}
-      onMouseLeave={() => setShowReticleLayer(true)}
+      onMouseEnter={() => setMouseIsOverSettingsPanel(false)}
+      onMouseLeave={() => setMouseIsOverSettingsPanel(true)}
     >
       <div className="settings-panel-section">
         <div className="settings-panel-section-title">

ui-speedspacechart/src/styles/main.css

@@ -135,7 +135,7 @@ margin-top: 1.6875rem;
 #settings-panel {
   position: absolute;
   display: flex;
-  height: 27.5rem;
+  height: 27.5625rem;
   width: 32.875rem;
   margin-right: 20px;
   color: rgb(49, 46, 43);