Some JS code was simplified by using css, a reported issue was fixed in this way

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Incorrect attribute import in tracks (<https://github.com/openvinotoolkit/cvat/pull/3229>)
 - Issue "is not a constructor" when create object, save, undo, save, redo save (<https://github.com/openvinotoolkit/cvat/pull/3292>)
 - Fix CLI create an infinite loop if git repository responds with failure (<https://github.com/openvinotoolkit/cvat/pull/3267>)
+- Bug with sidebar & fullscreen (<https://github.com/openvinotoolkit/cvat/pull/3289>)
 
 ### Security
 

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/annotation-actions.ts

@@ -146,7 +146,6 @@ export enum AnnotationActionTypes {
     GROUP_ANNOTATIONS_FAILED = 'GROUP_ANNOTATIONS_FAILED',
     SPLIT_ANNOTATIONS_SUCCESS = 'SPLIT_ANNOTATIONS_SUCCESS',
     SPLIT_ANNOTATIONS_FAILED = 'SPLIT_ANNOTATIONS_FAILED',
-    UPDATE_TAB_CONTENT_HEIGHT = 'UPDATE_TAB_CONTENT_HEIGHT',
     COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR',
     COLLAPSE_APPEARANCE = 'COLLAPSE_APPEARANCE',
     COLLAPSE_OBJECT_ITEMS = 'COLLAPSE_OBJECT_ITEMS',
@@ -576,15 +575,6 @@ export function activateObject(activatedStateID: number | null, activatedAttribu
     };
 }
 
-export function updateTabContentHeight(tabContentHeight: number): AnyAction {
-    return {
-        type: AnnotationActionTypes.UPDATE_TAB_CONTENT_HEIGHT,
-        payload: {
-            tabContentHeight,
-        },
-    };
-}
-
 export function collapseSidebar(): AnyAction {
     return {
         type: AnnotationActionTypes.COLLAPSE_SIDEBAR,

cvat-ui/src/components/annotation-page/appearance-block.tsx

@@ -15,10 +15,7 @@ import Button from 'antd/lib/button';
 import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker';
 import { ColorizeIcon } from 'icons';
 import { ColorBy, CombinedState, DimensionType } from 'reducers/interfaces';
-import {
-    collapseAppearance as collapseAppearanceAction,
-    updateTabContentHeight as updateTabContentHeightAction,
-} from 'actions/annotation-actions';
+import { collapseAppearance as collapseAppearanceAction } from 'actions/annotation-actions';
 import {
     changeShapesColorBy as changeShapesColorByAction,
     changeShapesOpacity as changeShapesOpacityAction,
@@ -50,21 +47,6 @@ interface DispatchToProps {
     changeShowProjections(event: CheckboxChangeEvent): void;
 }
 
-export function computeHeight(): number {
-    const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
-    const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
-    const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-nav'));
-
-    if (sidebar && appearance && tabs) {
-        const maxHeight = sidebar ? sidebar.clientHeight : 0;
-        const appearanceHeight = appearance ? appearance.clientHeight : 0;
-        const tabsHeight = tabs ? tabs.clientHeight : 0;
-        return maxHeight - appearanceHeight - tabsHeight;
-    }
-
-    return 0;
-}
-
 function mapStateToProps(state: CombinedState): StateToProps {
     const {
         annotation: {
@@ -95,19 +77,6 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>): DispatchToProps {
     return {
         collapseAppearance(): void {
             dispatch(collapseAppearanceAction());
-            const [collapser] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
-
-            if (collapser) {
-                const listener = (event: Event): void => {
-                    if ((event as TransitionEvent).propertyName === 'height') {
-                        const height = computeHeight();
-                        dispatch(updateTabContentHeightAction(height));
-                        collapser.removeEventListener('transitionend', listener);
-                    }
-                };
-
-                collapser.addEventListener('transitionend', listener);
-            }
         },
         changeShapesColorBy(event: RadioChangeEvent): void {
             dispatch(changeShapesColorByAction(event.target.value));

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -10,6 +10,7 @@ import Layout, { SiderProps } from 'antd/lib/layout';
 import Text from 'antd/lib/typography/Text';
 
 import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import { LogType } from 'cvat-logger';
 import {
     activateObject as activateObjectAction,
@@ -20,6 +21,7 @@ import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import { ThunkDispatch } from 'utils/redux';
 import AppearanceBlock from 'components/annotation-page/appearance-block';
 import ObjectButtonsContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-buttons';
+import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image';
 import { CombinedState, ObjectType } from 'reducers/interfaces';
 import AttributeEditor from './attribute-editor';
 import AttributeSwitcher from './attribute-switcher';
@@ -34,7 +36,7 @@ interface StateToProps {
     jobInstance: any;
     keyMap: KeyMap;
     normalizedKeyMap: Record<string, string>;
-    canvasInstance: Canvas;
+    canvasInstance: Canvas | Canvas3d;
     canvasIsReady: boolean;
     curZLayer: number;
 }
@@ -134,6 +136,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
             (collapser as HTMLElement).addEventListener('transitionend', listener as any);
         }
 
+        adjustContextImagePosition(!sidebarCollapsed);
         setSidebarCollapsed(!sidebarCollapsed);
     };
 

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx

@@ -255,7 +255,7 @@ function AttributeEditor(props: Props): JSX.Element {
     const { inputType, values, id: attrID } = attribute;
 
     return (
-        <div>
+        <div className='attribute-annotations-sidebar-attribute-editor'>
             {renderList({ values, inputType, onChange })}
             <hr />
             {renderInputElement({

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss

@@ -8,9 +8,14 @@
     height: 100%;
 }
 
-.attribute-annotation-sidebar {
+.attribute-annotation-sidebar:not(.ant-layout-sider-collapsed) {
     background: $background-color-2;
     padding: 5px;
+
+    > .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .cvat-attribute-annotation-sidebar-object-switcher,
@@ -43,6 +48,11 @@
 .attribute-annotations-sidebar-not-found-wrapper {
     margin-top: 20px;
     text-align: center;
+    flex-grow: 10;
+}
+
+.attribute-annotations-sidebar-attribute-editor {
+    flex-grow: 10;
 }
 
 .attribute-annotation-sidebar-attr-list-wrapper {

cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx

@@ -13,6 +13,19 @@ import { CombinedState } from 'reducers/interfaces';
 import { hideShowContextImage, getContextImage } from 'actions/annotation-actions';
 import CVATTooltip from 'components/common/cvat-tooltip';
 
+export function adjustContextImagePosition(sidebarCollapsed: boolean): void {
+    const element = window.document.getElementsByClassName('cvat-context-image-wrapper')[0] as
+        | HTMLDivElement
+        | undefined;
+    if (element) {
+        if (sidebarCollapsed) {
+            element.style.right = '40px';
+        } else {
+            element.style.right = '';
+        }
+    }
+}
+
 export default function ContextImage(): JSX.Element | null {
     const dispatch = useDispatch();
     const { number: frame, hasRelatedContext } = useSelector((state: CombinedState) => state.annotation.player.frame);

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx

@@ -17,7 +17,6 @@ import { CombinedState } from 'reducers/interfaces';
 
 export default function LabelsListComponent(): JSX.Element {
     const dispatch = useDispatch();
-    const tabContentHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight);
     const frame = useSelector((state: CombinedState): number => state.annotation.player.frame.number);
     const frameIssues = useSelector((state: CombinedState): any[] => state.review.frameIssues);
     const issues = useSelector((state: CombinedState): any[] => state.review.issues);
@@ -50,7 +49,7 @@ export default function LabelsListComponent(): JSX.Element {
         };
 
     return (
-        <div style={{ height: tabContentHeight }}>
+        <>
             <div className='cvat-objects-sidebar-issues-list-header'>
                 <Row justify='start' align='middle'>
                     <Col>
@@ -122,6 +121,6 @@ export default function LabelsListComponent(): JSX.Element {
                     ),
                 )}
             </div>
-        </div>
+        </>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx

@@ -14,7 +14,6 @@ import GlobalHotKeys from 'utils/mousetrap-react';
 function LabelsListComponent(): JSX.Element {
     const dispatch = useDispatch();
     const labels = useSelector((state: CombinedState) => state.annotation.job.labels);
-    const listHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight);
     const activatedStateID = useSelector((state: CombinedState) => state.annotation.annotations.activatedStateID);
     const states = useSelector((state: CombinedState) => state.annotation.annotations.states);
     const keyMap = useSelector((state: CombinedState) => state.shortcuts.keyMap);
@@ -87,7 +86,7 @@ function LabelsListComponent(): JSX.Element {
     };
 
     return (
-        <div style={{ height: listHeight }} className='cvat-objects-sidebar-labels-list'>
+        <div className='cvat-objects-sidebar-labels-list'>
             <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} />
             {labelIDs.map(
                 (labelID: number): JSX.Element => (

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -10,7 +10,6 @@ import ObjectListHeader from './objects-list-header';
 
 interface Props {
     readonly: boolean;
-    listHeight: number;
     statesHidden: boolean;
     statesLocked: boolean;
     statesCollapsedAll: boolean;
@@ -31,7 +30,6 @@ interface Props {
 function ObjectListComponent(props: Props): JSX.Element {
     const {
         readonly,
-        listHeight,
         statesHidden,
         statesLocked,
         statesCollapsedAll,
@@ -50,7 +48,7 @@ function ObjectListComponent(props: Props): JSX.Element {
     } = props;
 
     return (
-        <div style={{ height: listHeight }}>
+        <>
             <ObjectListHeader
                 readonly={readonly}
                 statesHidden={statesHidden}
@@ -80,7 +78,7 @@ function ObjectListComponent(props: Props): JSX.Element {
                     ),
                 )}
             </div>
-        </div>
+        </>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React, { Dispatch, useEffect, TransitionEvent } from 'react';
+import React, { Dispatch, TransitionEvent } from 'react';
 import { AnyAction } from 'redux';
 import { connect } from 'react-redux';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
@@ -12,13 +12,12 @@ import Tabs from 'antd/lib/tabs';
 import Layout from 'antd/lib/layout';
 
 import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import { CombinedState } from 'reducers/interfaces';
 import LabelsList from 'components/annotation-page/standard-workspace/objects-side-bar/labels-list';
-import {
-    collapseSidebar as collapseSidebarAction,
-    updateTabContentHeight as updateTabContentHeightAction,
-} from 'actions/annotation-actions';
-import AppearanceBlock, { computeHeight } from 'components/annotation-page/appearance-block';
+import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image';
+import { collapseSidebar as collapseSidebarAction } from 'actions/annotation-actions';
+import AppearanceBlock from 'components/annotation-page/appearance-block';
 import IssuesListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/issues-list';
 
 interface OwnProps {
@@ -27,12 +26,11 @@ interface OwnProps {
 
 interface StateToProps {
     sidebarCollapsed: boolean;
-    canvasInstance: Canvas;
+    canvasInstance: Canvas | Canvas3d;
 }
 
 interface DispatchToProps {
     collapseSidebar(): void;
-    updateTabContentHeight(): void;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
@@ -54,33 +52,14 @@ function mapDispatchToProps(dispatch: Dispatch<AnyAction>): DispatchToProps {
         collapseSidebar(): void {
             dispatch(collapseSidebarAction());
         },
-        updateTabContentHeight(): void {
-            const height = computeHeight();
-            dispatch(updateTabContentHeightAction(height));
-        },
     };
 }
 
 function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.Element {
     const {
-        sidebarCollapsed, canvasInstance, collapseSidebar, updateTabContentHeight, objectsList,
+        sidebarCollapsed, canvasInstance, collapseSidebar, objectsList,
     } = props;
 
-    useEffect(() => {
-        const alignTabHeight = (): void => {
-            if (!sidebarCollapsed) {
-                updateTabContentHeight();
-            }
-        };
-
-        window.addEventListener('resize', alignTabHeight);
-        alignTabHeight();
-
-        return () => {
-            window.removeEventListener('resize', alignTabHeight);
-        };
-    }, []);
-
     const collapse = (): void => {
         const [collapser] = window.document.getElementsByClassName('cvat-objects-sidebar');
         const listener = (event: TransitionEvent): void => {
@@ -95,6 +74,7 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
             (collapser as HTMLElement).addEventListener('transitionend', listener as any);
         }
 
+        adjustContextImagePosition(!sidebarCollapsed);
         collapseSidebar();
     };
 

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss

@@ -6,8 +6,6 @@
 
 .cvat-objects-appearance-collapse.ant-collapse {
     width: 100%;
-    bottom: 0;
-    position: absolute;
     border-radius: 0;
 
     > .ant-collapse-item {

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -73,6 +73,23 @@
     overflow-y: auto;
     overflow-x: hidden;
 
+    > .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+
+        > .cvat-objects-sidebar-tabs {
+            flex-grow: 10;
+
+            > div {
+                display: flex;
+
+                div[role='tabpanel'] {
+                    height: 100%;
+                }
+            }
+        }
+    }
+
     &.ant-layout-sider-collapsed {
         overflow: initial;
     }

cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss

@@ -8,7 +8,7 @@
     height: 100%;
 }
 
-.cvat-tag-annotation-sidebar {
+.cvat-tag-annotation-sidebar:not(.ant-layout-sider-collapsed) {
     background: $background-color-2;
     padding: 5px;