wenay-react2 1.0.20 → 1.0.21

package/lib/common/src/components/Dnd/RNDFunc3.js

@@ -1,27 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
 import { renderBy, updateBy } from "../../../updateBy";
-// Карта всех размеров всплывающих окон
+// Map of all popup window sizes
 export const ExRNDMap3 = new Map();
 // limit={{x:{min:0}, y:{min:0}}}
 let k = 0;
 const openWindows = { ar: [] };
+// Freezes the subtree until update changes (intentionally ignores render closure changes) -
+// the previous useMemo-in-callback semantics, but without calling a hook from an arbitrary place
+const MemoChild = React.memo(({ update, render }) => render(update), (prev, next) => prev.update === next.update);
 export const DivRnd3 = (a) => {
-    // const Base = ({ update }: { update: number }) => {
-    //     console.log(update)
-    //     return typeof a.children === "function" ? a.children(update) : a.children;
-    // }
-    const Base2 = ({ update }) => {
-        return typeof a.children === "function" ? a.children(update) : a.children;
-    };
-    // const ff = (update: number) => useMemo(() => <Base update={update} />, [update]);
-    const ff = (update) => useMemo(() => _jsx(Base2, { update: update }), [typeof a.children === "function" ? update : true]);
-    return DivRndBase3({ ...a, children: ff });
+    const isFunc = typeof a.children === "function";
+    const renderChild = (update) => typeof a.children === "function" ? a.children(update) : a.children;
+    const ff = (update) => _jsx(MemoChild, { update: isFunc ? update : 0, render: renderChild });
+    return _jsx(DivRndBase3, { ...a, children: ff });
 };
 /**
- * Компонент-обёртка над react-rnd.
- * Обеспечивает перетаскивание и изменение размеров, опциональный заголовок и кнопку закрытия.
+ * Wrapper component around react-rnd.
+ * Provides dragging and resizing, an optional header, and a close button.
  */
 export function DivRndBase3({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow = true }) {
     if (onCLickClose && !limit) {
@@ -29,17 +26,13 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
     }
     const positionDef = { x: 0, y: 0, ...(position ?? {}) };
     const sizeDef = { height: 0, width: 0, ...(size ?? {}) };
-    // Если есть ключ — данные положения и размера храним в карте
+    // If there is a key, store position and size data in the map
     let map;
     if (ks) {
         map = ExRNDMap3.get(ks) ?? ExRNDMap3.set(ks, { size: sizeDef, position: positionDef }).get(ks);
     }
     position = map?.position ?? positionDef;
     size = map?.size ?? sizeDef;
-    // Если нужно вписаться в окно по размеру
-    if (sizeByWindow) {
-        // ...здесь можно добавить логику проверки/коррекции на window.innerWidth, window.innerHeight и т.д.
-    }
     const id2 = useRef({ k: k++ });
     const id = id2.current;
     const [zIndexX, setZIndexX] = useState(0);
@@ -47,47 +40,48 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
     const lastT = useRef(null);
     const [a, setA] = useState(false);
     const [b, setB] = useState(false);
-    const [x, setX] = useState(position?.x ?? 0);
-    const [y, setY] = useState(position?.y ?? 30);
-    const [width, setWidth] = useState(size?.width ?? 400);
-    const [height, setHeight] = useState(size?.height ?? 400);
+    const [x, setX] = useState(position.x);
+    const [y, setY] = useState(position.y);
+    const [width, setWidth] = useState(size.width);
+    const [height, setHeight] = useState(size.height);
     const [update, setUpdate] = useState(0);
     const zindex = useRef(zIndexX);
     zindex.current = zIndexX;
-    // Обновляем zIndex окна, если оно поднято сверху
+    // Update the window zIndex if it was brought to the top
     updateBy(openWindows, () => {
         const z = openWindows.ar.findIndex((v) => v.k === id.k);
         if (z >= 0 && z !== zindex.current) {
             setZIndexX(z);
         }
     });
+    // limit via ref: an inline object in props must not resubscribe document listeners on every render
+    const limitRef = useRef(limit);
+    useLayoutEffect(() => { limitRef.current = limit; });
     /**
-     * Хук для перетаскивания мышкой (a) и перетаскивания на тач-устройствах (b).
-     * Снимаем подписки при размонтировании и при изменении зависимостей (a/b).
+     * Hook for mouse dragging (a) and touch-device dragging (b).
+     * Remove subscriptions on unmount and when dependencies change (a/b).
      */
     useEffect(() => {
-        // Мышь
+        // Mouse
         const mouseMoveHandler = (e) => {
             e.stopPropagation();
-            if (lastC.current == null) {
-                lastC.current = {
-                    x: e.clientX,
-                    y: e.clientY
-                };
-            }
+            // mousedown always sets lastC before this subscription exists
+            if (lastC.current == null)
+                return;
             const data = lastC.current;
             if (e.buttons === 1) {
                 let newX = e.clientX + data.x;
                 let newY = e.clientY + data.y;
-                if (limit) {
-                    if (limit.x?.min !== undefined && limit.x.min > newX)
-                        newX = limit.x.min;
-                    if (limit.x?.max !== undefined && limit.x.max < newX)
-                        newX = limit.x.max;
-                    if (limit.y?.min !== undefined && limit.y.min > newY)
-                        newY = limit.y.min;
-                    if (limit.y?.max !== undefined && limit.y.max < newY)
-                        newY = limit.y.max;
+                const lim = limitRef.current;
+                if (lim) {
+                    if (lim.x?.min !== undefined && lim.x.min > newX)
+                        newX = lim.x.min;
+                    if (lim.x?.max !== undefined && lim.x.max < newX)
+                        newX = lim.x.max;
+                    if (lim.y?.min !== undefined && lim.y.min > newY)
+                        newY = lim.y.min;
+                    if (lim.y?.max !== undefined && lim.y.max < newY)
+                        newY = lim.y.max;
                 }
                 setX(newX);
                 setY(newY);
@@ -102,7 +96,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             lastC.current = null;
             setA(false);
         };
-        // Тач
+        // Touch
         const touchMoveHandler = (e) => {
             const data = lastT.current;
             if (!data)
@@ -117,15 +111,16 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
                 return;
             let newX = t.clientX + data.x;
             let newY = t.clientY + data.y;
-            if (limit) {
-                if (limit.x?.min !== undefined && limit.x.min > newX)
-                    newX = limit.x.min;
-                if (limit.x?.max !== undefined && limit.x.max < newX)
-                    newX = limit.x.max;
-                if (limit.y?.min !== undefined && limit.y.min > newY)
-                    newY = limit.y.min;
-                if (limit.y?.max !== undefined && limit.y.max < newY)
-                    newY = limit.y.max;
+            const lim = limitRef.current;
+            if (lim) {
+                if (lim.x?.min !== undefined && lim.x.min > newX)
+                    newX = lim.x.min;
+                if (lim.x?.max !== undefined && lim.x.max < newX)
+                    newX = lim.x.max;
+                if (lim.y?.min !== undefined && lim.y.min > newY)
+                    newY = lim.y.min;
+                if (lim.y?.max !== undefined && lim.y.max < newY)
+                    newY = lim.y.max;
             }
             setX(newX);
             setY(newY);
@@ -146,25 +141,25 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
                 setB(false);
             }
         };
-        // Если активирован режим перетаскивания мышью
+        // If mouse dragging mode is active
         if (a) {
             document.addEventListener("mousemove", mouseMoveHandler);
             document.addEventListener("mouseup", mouseUpHandler);
         }
-        // Если активирован режим перетаскивания для тач-событий
+        // If touch-event dragging mode is active
         if (b) {
             document.addEventListener("touchmove", touchMoveHandler);
             document.addEventListener("touchend", touchEndHandler);
         }
-        // Возвращаем функцию очистки для размонтирования и при изменениях a/b:
+        // Return the cleanup function for unmount and a/b changes:
         return () => {
             document.removeEventListener("mousemove", mouseMoveHandler);
             document.removeEventListener("mouseup", mouseUpHandler);
             document.removeEventListener("touchmove", touchMoveHandler);
             document.removeEventListener("touchend", touchEndHandler);
         };
-    }, [a, b, limit, x, y]);
-    // При первой отрисовке добавляем "окно" в массив, при размонтировании — удаляем
+    }, [a, b]);
+    // On the first render, add the window to the array; remove it on unmount
     useEffect(() => {
         openWindows.ar.push(id);
         renderBy(openWindows);
@@ -176,7 +171,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             }
         };
     }, []);
-    // Обновляем в карте координаты и размер, если задан keyForSave
+    // Update coordinates and size in the map if keyForSave is set
     if (size) {
         size.height = height;
         size.width = width;
@@ -185,22 +180,26 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
         position.x = x;
         position.y = y;
     }
-    const headerD = (_jsx("div", { ref: (el) => {
-            if (el && sizeByWindow) {
-                const rect = el.getBoundingClientRect();
-                if (rect.x < 0)
-                    setX(x - rect.x);
-                if (rect.y < 0)
-                    setY(y - rect.y);
-                // Пример небольшой коррекции, если окно слишком большое
-                if (typeof width === "number" && width > window.innerWidth) {
-                    setWidth(window.innerWidth);
-                }
-                if (typeof height === "number" && height > window.innerHeight) {
-                    setHeight(window.innerHeight);
-                }
-            }
-        }, onTouchStart: (e) => {
+    const headerRef = useRef(null);
+    // clamp to the viewport in a layout effect: an inline ref-callback ran twice per render
+    // (null + element) with a forced reflow from getBoundingClientRect on each call
+    useLayoutEffect(() => {
+        const el = headerRef.current;
+        if (!el || !sizeByWindow)
+            return;
+        const rect = el.getBoundingClientRect();
+        if (rect.x < 0)
+            setX(x - rect.x);
+        if (rect.y < 0)
+            setY(y - rect.y);
+        if (typeof width === "number" && width > window.innerWidth) {
+            setWidth(window.innerWidth);
+        }
+        if (typeof height === "number" && height > window.innerHeight) {
+            setHeight(window.innerHeight);
+        }
+    }, [x, y, width, height, sizeByWindow]);
+    const headerD = (_jsx("div", { ref: headerRef, onTouchStart: (e) => {
             const t = e.changedTouches[0];
             if (t) {
                 lastT.current = {
@@ -229,8 +228,9 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
         }, className: className, onResizeStop: (e, dir, elementRef, delta, { x: nx, y: ny }) => {
             setX(nx);
             setY(ny);
-            setHeight(+height + delta.height);
-            setWidth(+width + delta.width);
+            // actual element size: `+height + delta.height` gave NaN for string sizes like "100%"
+            setHeight(elementRef.offsetHeight);
+            setWidth(elementRef.offsetWidth);
             setUpdate(update + 1);
         }, onResize: (e, dir, elementRef, delta, pos) => {
             onUpdate?.({ e, dir, elementRef, delta, position: pos });
@@ -245,7 +245,7 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
                 position: "relative",
                 flex: "auto"
             }, onMouseDown: () => {
-                // Поднимаем окно наверх
+                // Bring the window to the top
                 const z = openWindows.ar.findIndex((v) => v === id);
                 if (z !== openWindows.ar.length - 1 || zindex.current !== z) {
                     const buf = openWindows.ar[z];
@@ -256,21 +256,19 @@ export function DivRndBase3({ children, keyForSave: ks, position, size, overflow
             }, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [(a || b) && (_jsx("div", { className: "maxSize", style: {
                                 position: "absolute",
                                 zIndex: zIndexX * 2 + zIndex + 1
-                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "msTradeAlt", style: {
+                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn", title: "Close", style: {
                         position: "absolute",
-                        right: -15,
-                        top: -15,
-                        fontSize: "32px",
-                        zIndex: zIndexX * 2 + zIndex + 1,
-                        cursor: "pointer"
-                    }, onClick: onCLickClose, children: "x" }, "323"))] }) }));
+                        right: -12,
+                        top: -12,
+                        zIndex: zIndexX * 2 + zIndex + 1
+                    }, onClick: onCLickClose, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2 2 L10 10 M10 2 L2 10", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }, "323"))] }) }));
 }
 /**
- * Компонент-обёртка, позволяющий перетаскивать вложенный элемент
- * как мышью, так и касаниями (touch).
+ * Wrapper component that lets a nested element be dragged
+ * with both mouse and touch input.
  *
- * Функция исключительно как хук на изменения параметров при движении - хоть и имеет свой компонент (для отсчета)
- * возвращает пройденное расстояние при перемещении дочернего элемента
+ * Function only as a hook for parameter changes during movement, although it has its own component (for offset counting).
+ * Returns the distance traveled when moving the child element.
  */
 export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last, dragging, onStart, onStop }) {
     const offsetMouse = useRef({ x: 0, y: 0 });
@@ -278,22 +276,30 @@ export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last,
     const [draggingMouse, setDraggingMouse] = useState(false);
     const [draggingTouch, setDraggingTouch] = useState(false);
     const posRef = useRef(last?.current ?? { x, y });
+    const wasDragging = useRef(false);
+    const callbacksRef = useRef({ onX, onY, onStart, onStop });
+    callbacksRef.current = { onX, onY, onStart, onStop };
     useLayoutEffect(() => {
         posRef.current.x = x;
         posRef.current.y = y;
     }, [x, y]);
     useEffect(() => {
         if (!draggingMouse && !draggingTouch) {
-            onStop?.();
+            // onStop only after a real drag - previously it also fired on initial mount
+            if (wasDragging.current) {
+                wasDragging.current = false;
+                callbacksRef.current.onStop?.();
+            }
             return;
         }
+        wasDragging.current = true;
         if (draggingMouse) {
             const handleMouseMove = (e) => {
                 const newX = e.clientX + offsetMouse.current.x;
                 const newY = e.clientY + offsetMouse.current.y;
                 posRef.current = { x: newX, y: newY };
-                onX?.(newX);
-                onY?.(newY);
+                callbacksRef.current.onX?.(newX);
+                callbacksRef.current.onY?.(newY);
             };
             const handleMouseUp = () => {
                 offsetMouse.current.x = 0;
@@ -304,7 +310,7 @@ export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last,
             };
             document.addEventListener("mousemove", handleMouseMove);
             document.addEventListener("mouseup", handleMouseUp);
-            onStart?.();
+            callbacksRef.current.onStart?.();
             return () => {
                 document.removeEventListener("mousemove", handleMouseMove);
                 document.removeEventListener("mouseup", handleMouseUp);
@@ -320,8 +326,8 @@ export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last,
                 const newX = theTouch.clientX + offsetTouch.current.x;
                 const newY = theTouch.clientY + offsetTouch.current.y;
                 posRef.current = { x: newX, y: newY };
-                onX?.(newX);
-                onY?.(newY);
+                callbacksRef.current.onX?.(newX);
+                callbacksRef.current.onY?.(newY);
             };
             const handleTouchEnd = (e) => {
                 if (!offsetTouch.current)
@@ -336,13 +342,13 @@ export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last,
             };
             document.addEventListener("touchmove", handleTouchMove);
             document.addEventListener("touchend", handleTouchEnd);
-            onStart?.();
+            callbacksRef.current.onStart?.();
             return () => {
                 document.removeEventListener("touchmove", handleTouchMove);
                 document.removeEventListener("touchend", handleTouchEnd);
             };
         }
-    }, [draggingMouse, draggingTouch, onX, onY, onStart, onStop]);
+    }, [draggingMouse, draggingTouch]);
     useLayoutEffect(() => {
         if (last) {
             last.current = posRef.current;
@@ -352,21 +358,17 @@ export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last,
         e.preventDefault();
         posRef.current.x = 0;
         posRef.current.y = 0;
-        offsetMouse.current = {
-            x: posRef.current.x - e.clientX,
-            y: posRef.current.y - e.clientY
-        };
+        offsetMouse.current = { x: -e.clientX, y: -e.clientY };
         setDraggingMouse(true);
     };
     const handleTouchStart = (e) => {
         const t = e.changedTouches[0];
         if (!t)
             return;
-        offsetTouch.current = {
-            x: posRef.current.x - t.clientX,
-            y: posRef.current.y - t.clientY,
-            id: t.identifier
-        };
+        // same per-gesture reset as mouse - without it repeated touch drags accumulated offset
+        posRef.current.x = 0;
+        posRef.current.y = 0;
+        offsetTouch.current = { x: -t.clientX, y: -t.clientY, id: t.identifier };
         setDraggingTouch(true);
     };
     return (_jsx("div", { style: {

package/lib/common/src/components/Dnd/Resizable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Resizable } from "re-resizable";
-// память всех размеров колонок
+// Memory for all column sizes
 export const mapResiReact = new Map();
 export function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size = { height: 50, width: 50 }, minWidth, minHeight, maxWidth = "100%", maxHeight = "100%", moveWith = true, moveHeight = true }) {
     let obj = size;
@@ -12,8 +12,8 @@ export function FResizableReact({ style, onResize, enable, children, keyForSave,
             mapResiReact.set(keyForSave, obj);
     }
     return _jsx(Resizable, { style: style, onResize: (event, direction, elementRef, delta) => {
-            onResize?.();
-            // костыль устраняет какой-то баг - проявляется при изменении родительского дива
+            onResize?.(obj);
+            // Workaround for a bug that appears when the parent div changes
             if (moveHeight == false && typeof obj.height == "string" && elementRef.style.height != obj.height)
                 elementRef.style.height = obj.height;
         }, enable: enable, onResizeStop: (e, dir, elementRef, delta) => {

package/lib/common/src/components/Menu/RightMenu.js

@@ -10,14 +10,14 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
     const [isFixed, setIsFixed] = useState(false);
     const [select, setSelect] = useState(null);
     const data = useRef({ m1: false, m2: false });
-    // Получаем JSX-функции модального окна
+    // Get modal JSX functions
     const jsx = useMemo(GetModalFuncJSX, []);
     const jsxRender = useMemo(() => _jsx(jsx.Render, {}), [jsx]);
     const [position, setPosition] = useState(initialPosition);
     const [isTop, setIsTop] = useState(initialPos2 === 'top');
     const positionLast = useRef({ x: 0, y: 0 });
     const handleDragEnd = useCallback((finalPosition) => {
-        // Обработка горизонтального смещения
+        // Handle horizontal offset
         if (position === 'left') {
             positionLast.current.x += finalPosition.x;
             if (positionLast.current.x > window.innerWidth * 0.6) {
@@ -32,7 +32,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
                 setPosition('left');
             }
         }
-        // Обработка вертикального смещения
+        // Handle vertical offset
         if (isTop) {
             positionLast.current.y += finalPosition.y;
             if (positionLast.current.y > document.documentElement.clientHeight * 0.6) {
@@ -49,7 +49,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
         }
     }, [position, isTop]);
     const { position: pos, dragProps } = useDraggable(0, 0, 50, handleDragEnd, () => { });
-    // Обработчики кликов и наведения
+    // Click and hover handlers
     const handleClickOutside = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -83,33 +83,27 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
             setSelect(null);
         }
     }, [jsx]);
-    // Отрисовка выпадающего меню (dop)
-    const dop = (isFixed || isOpen) && (_jsxs("div", { onMouseEnter: () => {
-            data.current.m1 = true;
-        }, onMouseLeave: () => {
-            data.current.m1 = false;
-            jsx.set(null);
-            setSelect(null);
-        }, className: `dropdown-content2 ${!isTop ? 'dropdown-up' : ''}`, style: {
+    // Render dropdown menu (dop)
+    const dop = (isFixed || isOpen) && (_jsxs("div", { onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, className: `dropdown-content2 ${!isTop ? 'dropdown-up' : ''}`, style: {
             display: 'flex',
             [position]: 0,
             right: position === 'left' ? 'auto' : 0,
             flexDirection: position === 'left' ? 'row' : 'row-reverse'
-        }, children: [_jsx("div", { className: "dropdown-content", onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: `menu-item ${select === index ? 'force-hover' : ''}`, onMouseEnter: () => handleSelect(item, index), onClick: () => handleSelect(item, index), children: item.label }, index))) }), _jsx("div", { onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: handleSubmenuMouseLeave, children: jsx.JSX ? (_jsx("div", { className: "submenu", style: { width: '40vw', minHeight: '70vh' }, children: jsxRender })) : null })] }));
-    // Вычисление смещений
+        }, children: [_jsx("div", { className: "dropdown-content", onMouseEnter: handleContentMouseEnter, onMouseLeave: handleContentMouseLeave, children: elements.map((item, index) => (_jsx("div", { className: `menu-item ${select === index ? 'force-hover' : ''}`, onMouseEnter: () => handleSelect(item, index), onClick: () => handleSelect(item, index), children: item.label }, item.label))) }), _jsx("div", { onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: handleSubmenuMouseLeave, children: jsx.JSX ? (_jsx("div", { className: "submenu", style: { width: '40vw', minHeight: '70vh' }, children: jsxRender })) : null })] }));
+    // Calculate offsets
     const computedX = position === 'left'
         ? positionLast.current.x + pos.x
         : positionLast.current.x - pos.x;
     const computedY = isTop
         ? positionLast.current.y + pos.y
         : positionLast.current.y - pos.y;
-    // Вычисление стилей контейнера меню
+    // Calculate menu container styles
     const containerStyle = useMemo(() => {
         const computedStyle = {
             ...style,
             display: 'flex'
         };
-        // Горизонтальное позиционирование
+        // Horizontal positioning
         if (position === 'left') {
             computedStyle.left = Math.max(0, Math.min(computedX, window.innerWidth - 50));
             computedStyle.right = 'auto';
@@ -118,7 +112,7 @@ export function DropdownMenu({ elements, style, position: initialPosition = 'rig
             computedStyle.right = Math.max(0, Math.min(computedX, window.innerWidth - 50));
             computedStyle.left = 'auto';
         }
-        // Вертикальное позиционирование
+        // Vertical positioning
         if (isTop) {
             computedStyle.top = Math.max(0, Math.min(computedY, window.innerHeight - 50));
             computedStyle.bottom = 'auto';