Проблема с настройкой ширины полосы прокрутки в CSS

Question

Существует возможность создать коллекцию новостных документов в приложении, и вы получите список столбцов документов.

Проблема в том, что при выборе документа в первой коллекции столбцов, весь документ содержимое перемещается с левой стороны, и первый столбец, в котором выделен документ, больше не виден.

Если выбран документ, то ползунок с правой стороны открыт, этот ползунок имеет width: 425px:

Я перемещаю всю упаковочную коллекцию влево на 425 пикселей.

Это хорошо для каждого варианта использования, кроме случаев, когда вы выбираете документ в первом столбце коллекции.

 .slider-open {
    // move all content to the left when slider is opened
    // basically  content is smaller for slider width and space between them
    width: calc(100% - 425px);
  }

Как настроить этот лог c для работы должным образом?

Видео об ошибке : https://www.loom.com/share/69159fd2a9e14c698d346aa846bb08db

CSS код:

.collections-wrapper {
  position: relative;
  margin: 0 30px;
}

.collections {
  display: flex;
  height: calc(100vh - 57px);
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-scroll-snap-type: mandatory;
  scroll-snap-type: x mandatory;
  -webkit-scroll-snap-points-x: repeat(100%);
  scroll-snap-points-x: repeat(100%);
  perspective: 1px;
  perspective-origin: left top;
  position: relative;
  padding-top: 30px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    width: 0px;
    height: 0;
    background: transparent; /* Chrome/Safari/Webkit */
  }
}

.collection {
  width: 25%;
  flex: 0 0 25%;
  height: 100%;
  padding: 24px 0;
  border-right: 1px solid var(--color-grey-light);
  scroll-snap-align: start;
  position: relative;

Collections.jsx:

 <div className={`collections-wrapper ${isSliderOpen ? 'slider-open' : ''}`}>
          <div className="collections-count">
            {collections.length}{' '}
            {collections.length > 1 ? t('nav.collMonitoring') : t('collection')}
          </div>
          {!collections.length ? (
            <div className="collections-empty">
              <p className="collections-empty-msg">{t('collectionsEmptyPage')}</p>
              <Link href="/search">
                <a data-tour="collections-empty" className="btn">
                  {t('startSearching')}
                </a>
              </Link>
            </div>
          ) : (
            <>
              <div className="collections-border" />
              <button
                className="scrollbar-btn left"
                type="button"
                onClick={() => this.scrollCollections()}
              >
                <i className="material-icons md-30">keyboard_arrow_left</i>
              </button>
              <button
                className="scrollbar-btn right"
                type="button"
                onClick={() => this.scrollCollections(true)}
              >
                <i className="material-icons md-30">keyboard_arrow_right</i>
              </button>

              <div className="bar" />
              <div
                className="collections"
                ref={(node) => {
                  this.collectionsWrapper = node;
                }}
              >
                <Scrollbar update={this.state.updateScrollbar} containerClass="collections">
                  <SortableList
                    onSortEnd={(props) => this.onSortEnd(props)}
                    axis="x"
                    helperClass="collection-drag"
                    useDragHandle
                    lockAxis="x"
                  />
                </Scrollbar>
              </div>
            </>
          )}
        </div>
        {this.state.isSliderOpen ? (
          <Slider
            currentDocument={currentDocument}
            closeSlider={this.closeSlider}
            key={currentDocument.id}
          />
        ) : (
          ''
        )}
      </>