special-pages/pages/new-tab/app/components/Components.module.css
/* nested styles to avoid global side-effects */

body[data-display="components"] {
    padding-left: 0;
    padding-right: 0;

    a {
        color: var(--ntp-text-normal);
    }
}

.main {
    height: 100vh;
    overflow: auto;
    color: var(--ntp-text-normal);
}


.contentTube {
    position: relative;
    z-index: 1;
}

.componentList {
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-16);
    max-width: calc(504 * var(--px-in-rem));
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 2rem;
}

body:has(.tubeGrid):has([data-isolated=true]) {
    .componentList {
        max-width: none;
        padding: var(--sp-16);

    }
}

.tubeGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 540px);
    grid-column-gap: 12px;
    align-items: flex-start;

    + .tubeGrid {
        margin-top: 12px;
    }
}

.itemInfo {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.itemLinks {
    display: flex;
    align-items: center;
    gap: 1em;
}

.itemLink {
    color: var(--ntp-text-normal);
    padding: 0.2em 0.3em;
    border: 1px solid var(--color-gray-60);
    border-radius: var(--border-radius-xs);
    display: inline-block;
    line-height: 1;
    text-decoration: none;

    &:hover {
        background: var(--color-gray-20);
    }

    [data-theme=dark] & {
        &:hover {
            background: var(--color-gray-90);
        }
    }
}

.debugBar {
    padding: 1rem;
    border-bottom: 1px dotted gray;
    display: grid;
    grid-row-gap: .5rem;
    align-items: center;
    grid-column-gap: 1rem;
    grid-template-columns: max-content;
}

.buttonRow {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.grid-container {
    display: grid;
    gap: 1rem; /* Adjust the gap size as needed */
}

.item {
    position: relative;
}
