Modal прячется за Epic+Tabbar и Counter поверх затемнения Modal

[TheRealFaner]

Часть модального окна скрыта под Tabbar, который находиться внутри Epic согласно документации. Так же проблема, что Counter элементы не уходят под затемнение при вызове Modal.

• Момент в Counter можно решить если переопределить z-index=2 у классов: .ModalRootmask и .ModalRootviewport
• Модальное окно и Tabbar пока не поддаются подобной манипуляции.

Собственно привожу пример кода и скриншот.

function TimeModal({activeModal, setActiveModal}) {
    const modalOk = () => {
        console.log('modal Ok!')
        setActiveModal(null);
    }
    const modalClose= () => {
        console.log('modal Close')
        setActiveModal(null);
    }

    return (
        <ModalRoot activeModal={activeModal}>
            <ModalPage
                id="timeModal"
                onClose={modalClose}
                header={
                    <ModalPageHeader
                    left={<PanelHeaderButton onClick={modalClose}><Icon24Cancel /></PanelHeaderButton>}
                    right={<PanelHeaderButton onClick={modalOk}>{<Icon24Done />}</PanelHeaderButton>}
                  >
                    Фильтры
                  </ModalPageHeader>
                      }
            >
                <Div>asd</Div>
                <Div>qwe</Div>
                <Div>123</Div>
                <Div>456</Div>
            </ModalPage>
        </ModalRoot>
    )
}

.............................
            <TimeBlock 
                name='Мини' 
                timeStart='08:00'
                timeEnd='09:00'
            />
        </CardGrid>
    </Group>
    <TimeModal activeModal={activeModal} setActiveModal={setActiveModal}/>
</Panel>
..............................
//Epic in App.js
<Epic activeStory={activeStory} tabbar={
    <Tabbar>
        <TabbarItem
            onClick={onStoryChange}
            data-story="home"
        >
            <UserIcon sex={fetchedUser?.sex} selected={activeStory === 'home'} width="28px" height="28px"/>
        </TabbarItem>
        <TabbarItem
            onClick={onStoryChange}
            data-story="timer"
        >
            <StopwatchIcon selected={activeStory === 'timer'} width="28px" height="28px" />
        </TabbarItem>
        <TabbarItem
            onClick={onStoryChange}
            data-story="reports"
        >
            <ReportsIcon selected={activeStory === 'reports'} width="28px" height="28px" />
        </TabbarItem>
    </Tabbar>
    }>
    <View id='home' activePanel={activePanel} popout={popout}>
        <Home id='home' fetchedUser={fetchedUser} go={go} setPopout={setPopout}/>
        <Persik id='persik' go={go} />
    </View>
    <View id='timer' activePanel={activePanel} popout={popout}>
        <Timer id='home' go={go} />
    </View>
    <View id='reports' activePanel={activePanel} popout={popout}>
        <Reports id='home' go={go} />
    </View>
</Epic>

[ArthurStam]

Спасибо, поправим

[TheRealFaner]

Пока что я поправил это z индексами и поднял модалку над таббаром.

.ModalRoot__mask {
    z-index: 2;
}
.ModalRoot__viewport {
    z-index: 2;
    bottom: var(--tabbar_height) !important;
}

[gbowsky]

    <TimeModal activeModal={activeModal} setActiveModal={setActiveModal}/>
</Panel>

В вашем случае у приложения некорректная структура. ModalRoot можно передавать через prop modal только в View, SplitLayout и Root.