Web Embed Component No Padding, Fullscreen

Community Resources
1

Hi guys! I have been able to adjust the Web Embed component padding using this code. I also removed the top and bottom navigation but you can remove that part and adjust your margins to suit if you like. I hope it helps someone. :folded_hands:


#page-root:has(.fullmode-embed) .no-sidebar .topbar-root {
display: none !important;
}

#page-root:has(.fullmode-embed) .has-tab-bar > div:last-child {
display: none;
}

/* Fullmode Web Embed — localized viewport sizing */

.fullmode-embed {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Let the Web Embed and its wrappers occupy available height */
.fullmode-embed > div,
.fullmode-embed > div > div,
.fullmode-embed > div > div > div,
.fullmode-embed > div > div > div > div,
.fullmode-embed > div > div > div > div > div,
.fullmode-embed > div > div > div > div > div > div,
.fullmode-embed > div > div > div > div > div > div > div,
.fullmode-embed > div > div > div > div > div > div > div > div {
    min-height: 0 !important;
}

/* Actual Fullmode iframe */
.fullmode-embed iframe {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    margin-top: -20px !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 600px) {
    .fullmode-embed iframe {
        height: 100dvh !important;
    }
}