@media(max-width:767px) {
    html {
        overflow-x: clip;
    }

    body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #app,
    .shell,
    .main,
    .content,
    .analytics {
        min-width: 0;
        max-width: 100%;
    }

    .content,
    .panel,
    .section-toolbar,
    .chart-toolbar,
    .dashboard-charts {
        min-width: 0;
    }

    .table-responsive,
    .bi-table-wrap,
    .collection-list {
        max-width: 100%;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .bi-table-wrap {
        overflow-x: auto;
    }

    .sidebar {
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }

    .section-toolbar > *,
    .toolbar-actions,
    .filter-bar,
    .action-group {
        min-width: 0;
        max-width: 100%;
    }

    .section-toolbar .btn,
    .toolbar-actions .btn {
        white-space: normal;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100%;
    }
}