[Question] How to use st.set_page_config(layout="wide") without user/pass elements taking up the full width.

[KeeonTabrizi]

Via: https://docs.streamlit.io/library/api-reference/utilities/st.set_page_config you can set the width to be "Wide" by default. This causes the user/pass elements to also load into this full width which is a stange UI/UX for a login interface. Any ideas how to over-ride this into some smaller width component?

[KeeonTabrizi]

One option i've is to use 3 columns, and just use col 2. Not sure if there's anything more elegant.

def check_password():
    """Returns `True` if the user had a correct password."""
    col1, col2, col3 = st.columns(3)
    with col1:
        st.empty()
    with col2:
        def password_entered():
            """Checks whether a password entered by the user is correct."""
            if (
                st.session_state["username"] in st.secrets["passwords"]
                and st.session_state["password"]
                == st.secrets["passwords"][st.session_state["username"]]
            ):
                st.session_state["password_correct"] = True
                del st.session_state["password"]  # don't store username + password
                del st.session_state["username"]
            else:
                st.session_state["password_correct"] = False

        if "password_correct" not in st.session_state:
            # First run, show inputs for username + password.
            st.text_input("Username", on_change=password_entered, key="username")
            st.text_input(
                "Password", type="password", on_change=password_entered, key="password"
            )
            return False
        elif not st.session_state["password_correct"]:
            # Password not correct, show input + error.
            st.text_input("Username", on_change=password_entered, key="username")
            st.text_input(
                "Password", type="password", on_change=password_entered, key="password"
            )
            st.error("Please check your credentials...")
            return False
        else:
            # Password correct.
            return True
    with col3:
        st.empty()

[mkhorasani]

Hey @KeeonTabrizi, unfortunately once you set the page width using the st.set_page_config command, it will affect all widgets displayed on your page and I am not aware of any workarounds. Perhaps you may want to fiddle with Streamlit's CSS to modify the amount of padding? And yes the columns hack will work just fine too.