I did this a while ago, but with a text entry and a floating button to imitate a chat screen.
I did have 3 versions of this CSS to test on mobile, desktop and tablet, if you want to have a go with this, here’s the mobile version.
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(2) {
position: fixed;
bottom: 0;
background: white;
box-shadow: 0px 0px 19px 5px rgba(199,197,199,1);
height: 100px;
width: 100%;
z-index: 3;
}
div[id*='screenScrollView'] > div > :nth-of-type(2) .input-wrap {
position: fixed;
width: 75%;
z-index: 2;
bottom: calc(var(--safe-area-inset-bottom) + 25px);
backdrop-filter: blur(8px);
}
[id="tabBar"] {
display: none;
}
div[id*='OverlayscreenScrollView'] > div > :nth-of-type(1) {
position:fixed;
z-index: 2;
width:50px;
height:50px;
bottom: calc(var(--safe-area-inset-bottom) + 25px);
right: 5%;
backdrop-filter: blur(8px);
}
[data-test="app-text-field"] + caption {
position: fixed;
z-index: 2;
bottom: calc(var(--safe-area-inset-bottom) + 5px);
backdrop-filter: blur(8px);
}