Use CSS var in JS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/elements/_ImageView.scss

@@ -18,6 +18,10 @@ $button-size: 32px;
 $icon-size: 22px;
 $button-gap: 24px;
 
+:root {
+    --image-view-panel-height: 68px;
+}
+
 .mx_ImageView {
     display: flex;
     width: 100%;
@@ -40,7 +44,7 @@ $button-gap: 24px;
 
 .mx_ImageView_panel {
     width: 100%;
-    height: 68px;
+    height: var(--image-view-panel-height);
     display: flex;
     justify-content: space-between;
     align-items: center;

src/components/views/elements/ImageView.tsx

@@ -46,7 +46,11 @@ const ZOOM_COEFFICIENT = 0.0025;
 const ZOOM_DISTANCE = 10;
 
 // Height of mx_ImageView_panel
-const PANEL_HEIGHT = 68;
+const getPanelHeight = (): number => {
+    const value = getComputedStyle(document.documentElement).getPropertyValue("--image-view-panel-height");
+    // Return the value as a number without the unit
+    return parseInt(value.slice(0, value.length - 2));
+};
 
 interface IProps extends IDialogProps {
     src: string; // the source of the image being displayed
@@ -103,7 +107,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 thumbnailInfo?.positionY +
                 (thumbnailInfo?.height / 2) -
                 (UIStore.instance.windowHeight / 2) -
-                (PANEL_HEIGHT / 2)
+                (getPanelHeight() / 2)
             ) ?? 0,
             moving: false,
             contextMenuDisplayed: false,