paulmeller
commented
3 months ago This custom css for Chainlit seems fixed it:
/ Ensure full height usage and prevent overflow / html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
/ Use flexbox for layout /
root {
display: flex;
flex-direction: column;}
/ Main content area / main { flex: 1; overflow-y: auto; min-height: calc(100vh - 6rem); / Fallback / }
/ Use svh units if supported / @supports (height: 100svh) { main { min-height: calc(100svh - 6rem); } }
/ Ensure header and footer don't shrink / header, footer, .input-area { flex-shrink: 0; }
Describe the bug Chainlit has incorrect viewport settings resulting the textbox sitting below the fold of the page instead of at the bottom.
To Reproduce Open default Chainlit app in Safari on iPhone or iPad.
Expected behavior Text box should sit at bottom of screen.
Screenshots See screenshot.
Desktop (please complete the following information):
Additional context Add any other context about the problem here.