Dynamic Island and browser UI blocking content

Hello dear webflow community
I am new to webflow and I am attempting to make my first webflow website basing on existing template. Currently I am using an accordion template made by Timothy Ricks and I am experiencing the following issues specifically on mobile.

Depending on the OS and browser, I noticed that the interactive tabs would either be blocked by browser UI (fig 1. Safari on IOS) or cropped because the URL bar pushed the contents down (fig 2, Chrome on android). How can I set up the divs and body so that the tabs and tabs_content will always be correctly fitted between the browser UI? Thank you so much in advance.

Apologies that I can not share my WIP at the moment without consent but my accordion interaction is based on Timothy R’s cloneable template.