Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

When using st.chat_input on a mobile device, the input field is obscured by the native browser UI (e.g., the browser's navigation bar at the bottom of the screen). This prevents users from interacting with the chat input effectively.

Reproducible Code Example

import streamlit as st

user_input = st.chat_input("Enter your question here...")

if user_input:
    st.write(f"Your input: {user_input}")

Steps To Reproduce

No response

Expected Behavior

The st.chat_input component should be fully visible and usable on mobile devices, adjusting its position to avoid being covered by the native browser UI elements.

Current Behavior

The st.chat_input component is hidden behind the mobile browser's bottom navigation bar, making it difficult or impossible to type into the input field.

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1.46.0, 1.46.1
• Python version: 3.12.2
• Operating System: iPhone 14, iOS 18.5
• Browser: Safari

Additional Information

This issue was introduced in Streamlit version 1.46.0 and persists in version 1.46.1. It does not occur in 1.45.1.

I suspect the introduction of the height property in the AppView styled component might be related to this bug:
https://github.com/streamlit/streamlit/blob/9ac66e9a73568772ad64e7e9d5256de62a99954e/frontend/app/src/components/AppView/styled-components.ts#L52

This fixed height might not be accounting for the dynamic nature of mobile browser UIs, which can often overlay content or change the available viewport size. I've only tested this on Safari on iOS; Android Chrome was not tested.