diff --git a/lib/static/components/details.jsx b/lib/static/components/details.jsx
index c9f4bef2f..86e3a121b 100644
--- a/lib/static/components/details.jsx
+++ b/lib/static/components/details.jsx
@@ -1,89 +1,81 @@
 'use strict';
 
-import React, {Component} from 'react';
+import React, {useContext, useLayoutEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {isEmpty, isFunction} from 'lodash';
-import {Card, Disclosure} from '@gravity-ui/uikit';
+import {Disclosure} from '@gravity-ui/uikit';
+import {MeasurementContext} from './measurement-context';
 
-export default class Details extends Component {
-    static propTypes = {
-        type: PropTypes.oneOf(['text', 'image']),
-        title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
-        content: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.element, PropTypes.array]).isRequired,
-        extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-        onClick: PropTypes.func,
-        asHtml: PropTypes.bool
-    };
-
-    state = {isOpened: false};
-
-    handleClick = () => {
-        this.setState((state, props) => {
-            const newState = {isOpened: !state.isOpened};
+export default function Details(props) {
+    const [isOpened, setIsOpened] = useState(false);
 
-            if (props.onClick) {
-                props.onClick(newState);
-            }
-
-            return newState;
-        });
-    };
+    const handleClick = () => {
+        const newIsOpened = !isOpened;
 
-    stopPropagation = (e) => {
-        e.stopPropagation();
+        setIsOpened(newIsOpened);
+        props.onClick?.({isOpened: newIsOpened});
     };
 
-    _getContent() {
-        const content = this.props.content;
+    const getContent = () => {
+        const {content} = props;
 
         return isFunction(content) ? content() : content;
-    }
+    };
 
-    _renderContent() {
-        if (!this.state.isOpened) {
+    const renderContent = () => {
+        if (!isOpened) {
             return null;
         }
 
-        const children = this.props.asHtml ? null : this._getContent();
-        const extraProps = this.props.asHtml ? {dangerouslySetInnerHTML: {__html: this._getContent()}} : {};
+        const children = props.asHtml ? null : getContent();
+        const extraProps = props.asHtml ? {dangerouslySetInnerHTML: {__html: getContent()}} : {};
 
         return <div className='details__content' {...extraProps}>
             {children}
         </div>;
-    }
+    };
 
-    render() {
-        const {type, title, content, extendClassNames} = this.props;
-        const className = classNames(
-            'details',
-            extendClassNames
-        );
+    const {title, content, extendClassNames} = props;
+    const className = classNames(
+        'details',
+        extendClassNames
+    );
 
-        return (
-            isEmpty(content) && !isFunction(content) ? (
-                <div className={className}>
-                    {title}
-                </div>
-            ) : (
-                <Disclosure className={className} onUpdate={this.handleClick}
-                    size='l'>
-                    <Disclosure.Summary>
-                        {(props, defaultButton) => (
-                            <div className={classNames(className, 'details__summary')} aria-controls={props.ariaControls} onClick={props.onClick} id={props.id}>
-                                <div className="details__expand-button" onClick={this.stopPropagation}>
-                                    {defaultButton}
-                                </div>
-                                {title}
+    const {measure} = useContext(MeasurementContext);
+    useLayoutEffect(() => {
+        measure?.();
+    }, [isOpened]);
+
+    return (
+        isEmpty(content) && !isFunction(content) ? (
+            <div className={className}>
+                {title}
+            </div>
+        ) : (
+            <Disclosure className={className} onUpdate={handleClick} size='l' expanded={isOpened}>
+                <Disclosure.Summary>
+                    {(props, defaultButton) => (
+                        <div className={classNames(className, 'details__summary')} aria-controls={props.ariaControls} onClick={props.onClick} id={props.id}>
+                            <div className="details__expand-button" onClick={e => e.stopPropagation()}>
+                                {defaultButton}
                             </div>
-                        )}
-                    </Disclosure.Summary>
-                    {type === 'image' ? this._renderContent() :
-                        <Card className='details__card' view='filled'>
-                            {this._renderContent()}
-                        </Card>}
-                </Disclosure>
-            )
-        );
-    }
+                            {title}
+                        </div>
+                    )}
+                </Disclosure.Summary>
+                {renderContent()}
+            </Disclosure>
+        )
+    );
 }
+
+Details.propTypes = {
+    id: PropTypes.string,
+    ariaControls: PropTypes.arrayOf(PropTypes.string),
+    title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.element, PropTypes.array]).isRequired,
+    extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    onClick: PropTypes.func,
+    asHtml: PropTypes.bool
+};
diff --git a/lib/static/components/measurement-context.js b/lib/static/components/measurement-context.js
new file mode 100644
index 000000000..b7e420aac
--- /dev/null
+++ b/lib/static/components/measurement-context.js
@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const MeasurementContext = createContext({measure: () => {}});
diff --git a/lib/static/components/section/body/description.jsx b/lib/static/components/section/body/description.jsx
index c87385bad..8670dc27c 100644
--- a/lib/static/components/section/body/description.jsx
+++ b/lib/static/components/section/body/description.jsx
@@ -14,7 +14,6 @@ export default class Description extends Component {
 
     render() {
         return <Details
-            type='text'
             title='Description'
             content={this._renderDescription}
         />;
diff --git a/lib/static/components/section/body/history/index.jsx b/lib/static/components/section/body/history/index.jsx
index 30ea9ae5f..f8fbeee54 100644
--- a/lib/static/components/section/body/history/index.jsx
+++ b/lib/static/components/section/body/history/index.jsx
@@ -5,7 +5,7 @@ import {isEmpty} from 'lodash';
 import Details from '../../../details';
 
 import './index.styl';
-import {List} from '@gravity-ui/uikit';
+import {Card, List} from '@gravity-ui/uikit';
 
 const History = ({history}) => {
     const renderHistoryItem = (item) => {
@@ -21,12 +21,13 @@ const History = ({history}) => {
         isEmpty(history)
             ? null
             : <Details
-                type='text'
                 title='History'
                 content={
-                    <div style={{display: `flex`}}>
-                        <List items={history} renderItem={renderHistoryItem} filterable={false} virtualized={false}/>
-                    </div>
+                    <Card className='details__card' view='filled'>
+                        <div style={{display: `flex`}}>
+                            <List items={history} renderItem={renderHistoryItem} filterable={false} virtualized={false}/>
+                        </div>
+                    </Card>
                 }
                 extendClassNames='history'
             />
diff --git a/lib/static/components/section/body/index.jsx b/lib/static/components/section/body/index.jsx
index cfa5fab79..ac29b0cf9 100644
--- a/lib/static/components/section/body/index.jsx
+++ b/lib/static/components/section/body/index.jsx
@@ -1,4 +1,4 @@
-import React, {Component, Fragment} from 'react';
+import React, {Fragment, useContext, useRef} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {isNumber} from 'lodash';
@@ -10,38 +10,28 @@ import * as actions from '../../../modules/actions';
 import ExtensionPoint from '../../extension-point';
 import {RESULT} from '../../../../constants/extension-points';
 import {ArrowRotateLeft} from '@gravity-ui/icons';
+import useResizeObserver from '@react-hook/resize-observer';
+import {MeasurementContext} from '../../measurement-context';
 
-class Body extends Component {
-    static propTypes = {
-        browserId: PropTypes.string.isRequired,
-        browserName: PropTypes.string.isRequired,
-        testName: PropTypes.string.isRequired,
-        resultIds: PropTypes.array.isRequired,
-        // from store
-        gui: PropTypes.bool.isRequired,
-        running: PropTypes.bool.isRequired,
-        retryIndex: PropTypes.number,
-        actions: PropTypes.object.isRequired
-    };
-
-    onRetrySwitcherChange = (index) => {
-        const {browserId, retryIndex} = this.props;
+function Body(props) {
+    const onRetrySwitcherChange = (index) => {
+        const {browserId, retryIndex} = props;
 
         if (index === retryIndex) {
             return;
         }
 
-        this.props.actions.changeTestRetry({browserId, retryIndex: index});
+        props.actions.changeTestRetry({browserId, retryIndex: index});
     };
 
-    onTestRetry = () => {
-        const {testName, browserName} = this.props;
+    const onTestRetry = () => {
+        const {testName, browserName} = props;
 
-        this.props.actions.retryTest({testName, browserName});
+        props.actions.retryTest({testName, browserName});
     };
 
-    _addRetrySwitcher = () => {
-        const {resultIds, retryIndex} = this.props;
+    const addRetrySwitcher = () => {
+        const {resultIds, retryIndex} = props;
 
         if (resultIds.length <= 1) {
             return;
@@ -52,14 +42,14 @@ class Body extends Component {
                 <RetrySwitcher
                     resultIds={resultIds}
                     retryIndex={retryIndex}
-                    onChange={this.onRetrySwitcherChange}
+                    onChange={onRetrySwitcherChange}
                 />
             </div>
         );
     };
 
-    _addRetryButton = () => {
-        const {gui, running} = this.props;
+    const addRetryButton = () => {
+        const {gui, running} = props;
 
         return gui
             ? (
@@ -71,7 +61,7 @@ class Body extends Component {
                         </Fragment>}
                         isSuiteControl={true}
                         isDisabled={running}
-                        handler={this.onTestRetry}
+                        handler={onTestRetry}
                         dataTestId="test-retry"
                     />
                 </div>
@@ -79,30 +69,47 @@ class Body extends Component {
             : null;
     };
 
-    _getActiveResultId = () => {
-        return this.props.resultIds[this.props.retryIndex];
+    const getActiveResultId = () => {
+        return props.resultIds[props.retryIndex];
     };
 
-    render() {
-        const {testName} = this.props;
-        const activeResultId = this._getActiveResultId();
-
-        return (
-            <div className="section__body">
-                <div className="image-box">
-                    <div className="controls">
-                        {this._addRetrySwitcher()}
-                        {this._addRetryButton()}
-                    </div>
-                    <ExtensionPoint name={RESULT} resultId={activeResultId} testName={testName}>
-                        <Result resultId={activeResultId} testName={testName} />
-                    </ExtensionPoint>
+    const {testName} = props;
+    const activeResultId = getActiveResultId();
+
+    const {measure} = useContext(MeasurementContext);
+    const resizeObserverRef = useRef(null);
+    useResizeObserver(resizeObserverRef, () => {
+        measure();
+    });
+
+    return (
+        <div className="section__body" ref={resizeObserverRef}>
+            <div className="image-box">
+                <div className="controls">
+                    {addRetrySwitcher()}
+                    {addRetryButton()}
                 </div>
+                <ExtensionPoint name={RESULT} resultId={activeResultId} testName={testName}>
+                    <Result resultId={activeResultId} testName={testName} />
+                </ExtensionPoint>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
+Body.propTypes = {
+    browserId: PropTypes.string.isRequired,
+    browserName: PropTypes.string.isRequired,
+    testName: PropTypes.string.isRequired,
+    resultIds: PropTypes.array.isRequired,
+    onResize: PropTypes.func,
+    // from store
+    gui: PropTypes.bool.isRequired,
+    running: PropTypes.bool.isRequired,
+    retryIndex: PropTypes.number,
+    actions: PropTypes.object.isRequired
+};
+
 export default connect(
     ({gui, running, view: {retryIndex: viewRetryIndex}, tree}, {browserId}) => {
         const {retryIndex: browserRetryIndex, lastMatchedRetryIndex} = tree.browsers.stateById[browserId] || {};
diff --git a/lib/static/components/section/body/meta-info/content.jsx b/lib/static/components/section/body/meta-info/content.jsx
index cc843208f..77d0291b7 100644
--- a/lib/static/components/section/body/meta-info/content.jsx
+++ b/lib/static/components/section/body/meta-info/content.jsx
@@ -5,6 +5,7 @@ import {DefinitionList} from '@gravity-ui/components';
 import PropTypes from 'prop-types';
 import {map, mapValues, isObject, omitBy, isEmpty} from 'lodash';
 import {isUrl, getUrlWithBase, getRelativeUrl} from '../../../../../common-utils';
+import {Card} from '@gravity-ui/uikit';
 
 const serializeMetaValues = (metaInfo) => mapValues(metaInfo, (v) => isObject(v) ? JSON.stringify(v) : v);
 
@@ -25,34 +26,36 @@ const resolveUrl = (baseUrl, value) => {
 };
 
 const metaToElements = (metaInfo, metaInfoBaseUrls) => {
-    return <DefinitionList className='meta-info' itemClassName='meta-info__item' items={
-        map(metaInfo, (value, key) => {
-            let url = value.url;
-            value = value.content;
-
-            if (isUrl(value)) {
-                url = value;
-            } else if (metaInfoBaseUrls[key] && metaInfoBaseUrls[key] !== 'auto') {
-                const baseUrl = metaInfoBaseUrls[key];
-                const link = isUrl(baseUrl) ? resolveUrl(baseUrl, value) : path.join(baseUrl, value);
-                url = link;
-            } else if (typeof value === 'boolean') {
-                value = value.toString();
-            }
-
-            if (url) {
-                value = <a data-suite-view-link={url} className="custom-icon_view-local" target="_blank" href={url} rel="noreferrer">
-                    {value}
-                </a>;
-            }
-
-            return {
-                name: key,
-                content: <div className="meta-info__item-value">{value}</div>,
-                copyText: url || value
-            };
-        })
-    }/>;
+    return <Card className='details__card' view='filled'>
+        <DefinitionList className='meta-info' itemClassName='meta-info__item' items={
+            map(metaInfo, (value, key) => {
+                let url = value.url;
+                value = value.content;
+
+                if (isUrl(value)) {
+                    url = value;
+                } else if (metaInfoBaseUrls[key] && metaInfoBaseUrls[key] !== 'auto') {
+                    const baseUrl = metaInfoBaseUrls[key];
+                    const link = isUrl(baseUrl) ? resolveUrl(baseUrl, value) : path.join(baseUrl, value);
+                    url = link;
+                } else if (typeof value === 'boolean') {
+                    value = value.toString();
+                }
+
+                if (url) {
+                    value = <a data-suite-view-link={url} className="custom-icon_view-local" target="_blank" href={url} rel="noreferrer">
+                        {value}
+                    </a>;
+                }
+
+                return {
+                    name: key,
+                    content: <div className="meta-info__item-value">{value}</div>,
+                    copyText: url || value
+                };
+            })
+        }/>
+    </Card>;
 };
 
 class MetaInfoContent extends Component {
diff --git a/lib/static/components/section/body/meta-info/index.jsx b/lib/static/components/section/body/meta-info/index.jsx
index b5802d460..39e4fd2c6 100644
--- a/lib/static/components/section/body/meta-info/index.jsx
+++ b/lib/static/components/section/body/meta-info/index.jsx
@@ -20,7 +20,6 @@ class MetaInfo extends Component {
         const {resultId} = this.props;
 
         return <Details
-            type='text'
             title='Meta'
             content={<MetaInfoContent resultId={resultId}/>}
             onClick={this.onToggleMetaInfo}
diff --git a/lib/static/components/section/body/page-screenshot.tsx b/lib/static/components/section/body/page-screenshot.tsx
index 393e4db0a..374620382 100644
--- a/lib/static/components/section/body/page-screenshot.tsx
+++ b/lib/static/components/section/body/page-screenshot.tsx
@@ -10,7 +10,6 @@ interface PageScreenshotProps {
 export class PageScreenshot extends Component<PageScreenshotProps> {
     render(): JSX.Element {
         return <Details
-            type='image'
             title="Page screenshot"
             content={(): JSX.Element => <ResizedScreenshot image={this.props.image}/>}
         />;
diff --git a/lib/static/components/section/section-browser.jsx b/lib/static/components/section/section-browser.jsx
index e047ad62a..146efb603 100644
--- a/lib/static/components/section/section-browser.jsx
+++ b/lib/static/components/section/section-browser.jsx
@@ -1,109 +1,112 @@
-import React, {Component, Fragment} from 'react';
+import React, {Fragment, useContext, useLayoutEffect} from 'react';
 import {last, isEmpty} from 'lodash';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import Parser from 'html-react-parser';
 import PropTypes from 'prop-types';
 import * as actions from '../../modules/actions';
-import SectionWrapper from './section-wrapper';
 import BrowserTitle from './title/browser';
 import BrowserSkippedTitle from './title/browser-skipped';
 import Body from './body';
 import {isSkippedStatus} from '../../../common-utils';
+import {sectionStatusResolver} from './utils';
+import {MeasurementContext} from '../measurement-context';
 
-class SectionBrowser extends Component {
-    static propTypes = {
-        browserId: PropTypes.string.isRequired,
-        // from store
-        browser: PropTypes.shape({
-            id: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired,
-            resultIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-            parentId: PropTypes.string.isRequired
-        }).isRequired,
-        lastResult: PropTypes.shape({
-            id: PropTypes.string.isRequired,
-            status: PropTypes.string.isRequired,
-            error: PropTypes.object,
-            imageIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-            skipReason: PropTypes.string,
-            history: PropTypes.arrayOf(PropTypes.string)
-        }).isRequired,
-        shouldBeShown: PropTypes.bool.isRequired,
-        shouldBeOpened: PropTypes.bool.isRequired,
-        // from SectionCommonWrapper
-        sectionStatusResolver: PropTypes.func.isRequired,
-        actions: PropTypes.object.isRequired
-    };
-
-    onToggleSection = () => {
-        const {browserId, shouldBeOpened} = this.props;
+function SectionBrowser(props) {
+    const onToggleSection = () => {
+        const {browserId, shouldBeOpened} = props;
 
-        this.props.actions.toggleBrowserSection({browserId, shouldBeOpened: !shouldBeOpened});
+        props.actions.toggleBrowserSection({browserId, shouldBeOpened: !shouldBeOpened});
     };
 
-    _generateSkippedTitle(skipReason) {
+    const generateSkippedTitle = (skipReason) => {
         return (
             <Fragment>
-                [skipped] {this.props.browser.name}
+                [skipped] {props.browser.name}
                 {skipReason && ', reason: '}
                 {skipReason && Parser(skipReason)}
             </Fragment>
         );
-    }
+    };
 
-    render() {
-        if (!this.props.shouldBeShown) {
-            return null;
-        }
+    const {browser, shouldBeOpened, shouldBeShown, lastResult} = props;
+
+    const {measure} = useContext(MeasurementContext);
+
+    useLayoutEffect(() => {
+        measure?.();
+    }, [shouldBeShown, shouldBeOpened]);
+
+    if (!shouldBeShown) {
+        return null;
+    }
 
-        const {browser, shouldBeOpened, lastResult} = this.props;
+    const isSkippedLastResult = isSkippedStatus(lastResult.status);
+    const hasRetries = browser.resultIds.length > 1;
 
-        const isSkippedLastResult = isSkippedStatus(lastResult.status);
-        const hasRetries = browser.resultIds.length > 1;
+    const title = isSkippedLastResult
+        ? generateSkippedTitle(lastResult.skipReason)
+        : browser.name;
 
-        const title = isSkippedLastResult
-            ? this._generateSkippedTitle(lastResult.skipReason)
-            : browser.name;
+    // Detect executed test but failed and skipped
+    const isExecutedResult = hasRetries || !isEmpty(lastResult.history) || lastResult.error || lastResult.imageIds.length > 0;
+    const isSkipped = isSkippedLastResult && !isExecutedResult;
 
-        // Detect executed test but failed and skipped
-        const isExecutedResult = hasRetries || !isEmpty(lastResult.history) || lastResult.error || lastResult.imageIds.length > 0;
-        const isSkipped = isSkippedLastResult && !isExecutedResult;
+    const body = isSkipped || !shouldBeOpened
+        ? null
+        : (
+            <div><Body
+                browserId={browser.id}
+                browserName={browser.name}
+                testName={browser.parentId}
+                resultIds={browser.resultIds}
+            /></div>
+        );
 
-        const body = isSkipped || !shouldBeOpened
-            ? null
-            : (
-                <Body
+    const section = isSkipped
+        ? <BrowserSkippedTitle title={title} browserId={browser.id} />
+        : (
+            <Fragment>
+                <BrowserTitle
+                    title={title}
                     browserId={browser.id}
                     browserName={browser.name}
-                    testName={browser.parentId}
-                    resultIds={browser.resultIds}
+                    lastResultId={lastResult.id}
+                    handler={onToggleSection}
                 />
-            );
-
-        const section = isSkipped
-            ? <BrowserSkippedTitle title={title} browserId={browser.id} />
-            : (
-                <Fragment>
-                    <BrowserTitle
-                        title={title}
-                        browserId={browser.id}
-                        browserName={browser.name}
-                        lastResultId={lastResult.id}
-                        handler={this.onToggleSection}
-                    />
-                    {body}
-                </Fragment>
-            );
-
-        return (
-            <div className={this.props.sectionStatusResolver({status: lastResult.status, shouldBeOpened})}>
-                {section}
-            </div>
+                {body}
+            </Fragment>
         );
-    }
+
+    return (
+        <div className={sectionStatusResolver({status: lastResult.status, shouldBeOpened})}>
+            {section}
+        </div>
+    );
 }
 
+SectionBrowser.propTypes = {
+    browserId: PropTypes.string.isRequired,
+    // from store
+    browser: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        resultIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+        parentId: PropTypes.string.isRequired
+    }).isRequired,
+    lastResult: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        status: PropTypes.string.isRequired,
+        error: PropTypes.object,
+        imageIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+        skipReason: PropTypes.string,
+        history: PropTypes.arrayOf(PropTypes.string)
+    }).isRequired,
+    shouldBeShown: PropTypes.bool.isRequired,
+    shouldBeOpened: PropTypes.bool.isRequired,
+    actions: PropTypes.object.isRequired
+};
+
 export default connect(
     ({tree}, {browserId}) => {
         const browser = tree.browsers.byId[browserId];
@@ -113,4 +116,4 @@ export default connect(
         return {browser, lastResult, shouldBeShown, shouldBeOpened};
     },
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
-)(SectionWrapper(SectionBrowser));
+)(SectionBrowser);
diff --git a/lib/static/components/section/section-common.jsx b/lib/static/components/section/section-common.jsx
index 654341903..918496351 100644
--- a/lib/static/components/section/section-common.jsx
+++ b/lib/static/components/section/section-common.jsx
@@ -1,88 +1,86 @@
-import React, {Component} from 'react';
+import React, {useContext, useLayoutEffect} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import * as actions from '../../modules/actions';
-import SectionWrapper from './section-wrapper';
 import SectionBrowser from './section-browser';
 import Title from './title/simple';
+import {sectionStatusResolver} from './utils';
+import {MeasurementContext} from '../measurement-context';
 
-class SectionCommon extends Component {
-    static propTypes = {
-        suiteId: PropTypes.string.isRequired,
-        sectionRoot: PropTypes.bool.isRequired,
-        // from store
-        suiteName: PropTypes.string.isRequired,
-        suiteStatus: PropTypes.string.isRequired,
-        suiteChildIds: PropTypes.array,
-        suiteBrowserIds: PropTypes.array,
-        shouldBeShown: PropTypes.bool.isRequired,
-        shouldBeOpened: PropTypes.bool.isRequired,
-        // from SectionCommonWrapper
-        sectionStatusResolver: PropTypes.func.isRequired,
-        actions: PropTypes.object.isRequired
-    };
-
-    onToggleSection = () => {
-        const {suiteId, shouldBeOpened} = this.props;
-
-        this.props.actions.toggleSuiteSection({suiteId, shouldBeOpened: !shouldBeOpened});
-    };
+function SectionCommon(props) {
+    const {
+        suiteId,
+        suiteName,
+        suiteStatus,
+        suiteChildIds,
+        suiteBrowserIds,
+        sectionRoot,
+        shouldBeOpened,
+        shouldBeShown
+    } = props;
 
-    _drawSection() {
-        const {
-            suiteId,
-            suiteName,
-            suiteStatus,
-            suiteChildIds,
-            suiteBrowserIds,
-            sectionRoot,
-            sectionStatusResolver,
-            shouldBeOpened
-        } = this.props;
+    const {measure} = useContext(MeasurementContext);
 
-        if (!shouldBeOpened) {
-            return (
-                <div className={sectionStatusResolver({status: suiteStatus, shouldBeOpened, sectionRoot})}>
-                    <Title name={suiteName} suiteId={suiteId} handler={this.onToggleSection} />
-                </div>
-            );
-        }
+    useLayoutEffect(() => {
+        measure?.();
+    }, [shouldBeShown, shouldBeOpened]);
 
-        const childSuitesTmpl = suiteChildIds && suiteChildIds.map((suiteId) => {
-            // eslint-disable-next-line no-use-before-define
-            return <SectionCommonWrapper
-                key={suiteId}
-                suiteId={suiteId}
-                sectionRoot={false}
-            />;
-        });
+    if (!shouldBeShown) {
+        return null;
+    }
 
-        const browsersTmpl = suiteBrowserIds && suiteBrowserIds.map((browserId) => {
-            return <SectionBrowser key={browserId} browserId={browserId} />;
-        });
+    const onToggleSection = () => {
+        const {suiteId, shouldBeOpened} = props;
+        props.actions.toggleSuiteSection({suiteId, shouldBeOpened: !shouldBeOpened});
+    };
 
+    if (!shouldBeOpened) {
         return (
             <div className={sectionStatusResolver({status: suiteStatus, shouldBeOpened, sectionRoot})}>
-                <Title name={suiteName} suiteId={suiteId} handler={this.onToggleSection} />
-                <div className="section__body">
-                    {childSuitesTmpl}
-                    {browsersTmpl}
-                </div>
+                <Title name={suiteName} suiteId={suiteId} handler={onToggleSection} />
             </div>
         );
     }
 
-    render() {
-        if (!this.props.shouldBeShown) {
-            return null;
-        }
+    const childSuitesTmpl = suiteChildIds && suiteChildIds.map((suiteId) => {
+        // eslint-disable-next-line no-use-before-define
+        return <SectionCommonConnected
+            key={suiteId}
+            suiteId={suiteId}
+            sectionRoot={false}
+        />;
+    });
 
-        return this._drawSection();
-    }
+    const browsersTmpl = suiteBrowserIds && suiteBrowserIds.map((browserId) => {
+        return <SectionBrowser key={browserId} browserId={browserId} />;
+    });
+
+    return (
+        <div className={sectionStatusResolver({status: suiteStatus, shouldBeOpened, sectionRoot})}>
+            <Title name={suiteName} suiteId={suiteId} handler={onToggleSection} />
+            <div className="section__body">
+                {childSuitesTmpl}
+                {browsersTmpl}
+            </div>
+        </div>
+    );
 }
 
-const SectionCommonWrapper = connect(
+SectionCommon.propTypes = {
+    suiteId: PropTypes.string.isRequired,
+    sectionRoot: PropTypes.bool.isRequired,
+    // from store
+    suiteName: PropTypes.string.isRequired,
+    suiteStatus: PropTypes.string.isRequired,
+    suiteChildIds: PropTypes.array,
+    suiteBrowserIds: PropTypes.array,
+    shouldBeShown: PropTypes.bool.isRequired,
+    shouldBeOpened: PropTypes.bool.isRequired,
+    actions: PropTypes.object.isRequired
+};
+
+const SectionCommonConnected = connect(
     ({tree}, {suiteId}) => {
         const suite = tree.suites.byId[suiteId];
         const {shouldBeOpened, shouldBeShown} = tree.suites.stateById[suiteId];
@@ -97,6 +95,6 @@ const SectionCommonWrapper = connect(
         };
     },
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
-)(SectionWrapper(SectionCommon));
+)(SectionCommon);
 
-export default SectionCommonWrapper;
+export default SectionCommonConnected;
diff --git a/lib/static/components/section/section-wrapper.jsx b/lib/static/components/section/section-wrapper.jsx
deleted file mode 100644
index 05737b6a4..000000000
--- a/lib/static/components/section/section-wrapper.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-
-export default (SectionComponent) => class WrappedComponent extends Component {
-    sectionStatusResolver({status, shouldBeOpened, sectionRoot}) {
-        const baseClasses = ['section', {'section_collapsed': !shouldBeOpened}];
-
-        return classNames(baseClasses, {
-            [`section_status_${status}`]: status,
-            'section_root': sectionRoot
-        });
-    }
-
-    render() {
-        return <SectionComponent
-            {...this.props}
-            sectionStatusResolver={this.sectionStatusResolver}
-        />;
-    }
-};
diff --git a/lib/static/components/section/utils.js b/lib/static/components/section/utils.js
new file mode 100644
index 000000000..b49e5252d
--- /dev/null
+++ b/lib/static/components/section/utils.js
@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+
+export const sectionStatusResolver = ({status, shouldBeOpened, sectionRoot}) => {
+    const baseClasses = ['section', {'section_collapsed': !shouldBeOpened}];
+
+    return classNames(baseClasses, {
+        [`section_status_${status}`]: status,
+        'section_root': sectionRoot
+    });
+};
diff --git a/lib/static/components/state/error-details.jsx b/lib/static/components/state/error-details.jsx
index 4a2259833..f5de48cd4 100644
--- a/lib/static/components/state/error-details.jsx
+++ b/lib/static/components/state/error-details.jsx
@@ -13,6 +13,6 @@ export default class ErrorDetails extends Component {
         const {title, filePath} = this.props.errorDetails;
         const content = <div className="toggle-open__item"><a href={filePath} target="_blank" rel="noreferrer">{title}</a></div>;
 
-        return <Details type='text' title='Error details' content={content}/>;
+        return <Details title='Error details' content={content}/>;
     }
 }
diff --git a/lib/static/components/suites.jsx b/lib/static/components/suites.jsx
index ff9197514..d8e2106b8 100644
--- a/lib/static/components/suites.jsx
+++ b/lib/static/components/suites.jsx
@@ -1,31 +1,24 @@
-import React, {useRef} from 'react';
+import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {isEmpty, flatMap, find, once, throttle} from 'lodash';
 import {List, AutoSizer, CellMeasurer, CellMeasurerCache, WindowScroller} from 'react-virtualized';
-import useResizeObserver from '@react-hook/resize-observer';
 import {bindActionCreators} from 'redux';
 
 import * as actions from '../modules/actions';
 import SectionCommon from './section/section-common';
 import {ViewMode} from '../../constants/view-modes';
 import {getVisibleRootSuiteIds} from '../modules/selectors/tree';
+import {MeasurementContext} from './measurement-context';
 
-function VirtualizedRow(props) {
-    const resizeObserverRef = useRef(null);
-
-    useResizeObserver(resizeObserverRef, props.onResize);
-
-    return <div ref={props.onInit} style={props.style} className="virtualized__row">
-        <div ref={resizeObserverRef}>
-            <SectionCommon {...props.sectionProps} />
-        </div>
+const VirtualizedRow = forwardRef(function VirtualizedRow(props, ref) {
+    return <div ref={ref} style={props.style} className="virtualized__row">
+        <SectionCommon {...props.sectionProps} />
     </div>;
-}
+});
 
 VirtualizedRow.propTypes = {
     onInit: PropTypes.func,
-    onResize: PropTypes.func,
     style: PropTypes.object,
     sectionProps: PropTypes.object
 };
@@ -54,7 +47,9 @@ function Suites(props) {
                 rowIndex={index}
             >
                 {({measure, registerChild}) => {
-                    return <VirtualizedRow onInit={registerChild} onResize={measure} key={key} style={style} sectionProps={sectionProps} />;
+                    return <MeasurementContext.Provider value={{measure}}>
+                        <VirtualizedRow ref={registerChild} key={key} style={style} sectionProps={sectionProps} />
+                    </MeasurementContext.Provider>;
                 }}
             </CellMeasurer>
         );
diff --git a/test/unit/lib/static/components/section/body/index.jsx b/test/unit/lib/static/components/section/body/index.jsx
index ef6f6b004..400b7b74d 100644
--- a/test/unit/lib/static/components/section/body/index.jsx
+++ b/test/unit/lib/static/components/section/body/index.jsx
@@ -9,6 +9,7 @@ import userEvent from '@testing-library/user-event';
 describe('<Body />', () => {
     const sandbox = sinon.sandbox.create();
     let Body, Result, RetrySwitcher, actionsStub;
+    const originalResizeObserver = window.ResizeObserver;
 
     const mkBodyComponent = (props = {}, initialState = {}) => {
         props = defaults(props, {
@@ -35,9 +36,18 @@ describe('<Body />', () => {
             './result': {default: Result},
             '../../retry-switcher': {default: RetrySwitcher}
         }).default;
+
+        window.ResizeObserver = sinon.stub();
+        window.ResizeObserver.prototype.observe = sinon.stub();
+        window.ResizeObserver.prototype.unobserve = sinon.stub();
+        window.ResizeObserver.prototype.disconnect = sinon.stub();
     });
 
-    afterEach(() => sandbox.restore());
+    afterEach(() => {
+        window.ResizeObserver = originalResizeObserver;
+
+        sandbox.restore();
+    });
 
     describe('"Retry" button', () => {
         it('should render if "gui" is running', () => {
diff --git a/test/unit/lib/static/components/suites.jsx b/test/unit/lib/static/components/suites.jsx
index f14b14293..6567997dc 100644
--- a/test/unit/lib/static/components/suites.jsx
+++ b/test/unit/lib/static/components/suites.jsx
@@ -11,7 +11,6 @@ describe('<Suites/>', () => {
     let Suites, getVisibleRootSuiteIds;
     const originalOffsetHeight = Object.getOwnPropertyDescriptor(global.HTMLElement.prototype, 'offsetHeight');
     const originalOffsetWidth = Object.getOwnPropertyDescriptor(global.HTMLElement.prototype, 'offsetWidth');
-    const originalResizeObserver = window.ResizeObserver;
 
     const mkSuitesComponent = (initialState = {}) => {
         initialState = defaultsDeep(initialState, {
@@ -27,11 +26,6 @@ describe('<Suites/>', () => {
         Object.defineProperty(global.HTMLElement.prototype, 'offsetHeight', {configurable: true, value: 50});
         Object.defineProperty(global.HTMLElement.prototype, 'offsetWidth', {configurable: true, value: 50});
 
-        window.ResizeObserver = sinon.stub();
-        window.ResizeObserver.prototype.observe = sinon.stub();
-        window.ResizeObserver.prototype.unobserve = sinon.stub();
-        window.ResizeObserver.prototype.disconnect = sinon.stub();
-
         getVisibleRootSuiteIds = sinon.stub().returns([]);
 
         Suites = proxyquire('lib/static/components/suites', {
@@ -43,8 +37,6 @@ describe('<Suites/>', () => {
         Object.defineProperty(global.HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
         Object.defineProperty(global.HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
 
-        window.ResizeObserver = originalResizeObserver;
-
         sandbox.restore();
     });