.main-nav {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.main-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.chart-panel,
.chart-wrap,
.storage-chart-wrap {
    min-width: 0;
    max-width: 100%;
}

canvas {
    max-width: 100%;
}

@media (max-width: 720px) {
    main {
        width: calc(100% - 16px);
    }

    .main-nav {
        width: 100%;
        margin-bottom: 22px;
        border-radius: 11px;
    }

    .main-nav a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .history-date {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 8px;
    }

    .date-button {
        width: 42px;
        height: 42px;
    }

    .date-title {
        min-width: 0;
        font-size: clamp(18px, 5vw, 23px);
        overflow-wrap: anywhere;
    }

    .chart-tooltip {
        max-width: min(230px, calc(100% - 10px));
    }
}