Viewport on iPhone/iPad

[paulmeller]

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):

• OS: iOS
• Browser safari
• Version latest

Additional context Add any other context about the problem here.

[paulmeller]

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; }

[github-actions[bot]]

This issue is stale because it has been open for 14 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.