There is not enough margin between the main area and the page edges in some screen width. #6990

whitphx · 2023-07-12T15:15:46Z

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

Normally, the "View fullscreen" button appears like this:

However, in some window width, it goes outside the parent width making the page wider than the window and the horizontal scrollbar appears.

Similar to #6303

Reproducible Code Example

import streamlit as st

st.image("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png")

Steps To Reproduce

No response

Expected Behavior

Probably, the breakpoint should be set correctly so that the main area shrinks early and its margin is kept enough with any window width.

Current Behavior

No response

Is this a regression?

Yes, this used to work in a previous version.

Debug info

Streamlit version: 1.24.0
Python version: 3.9.2
Operating System: macOS Ventura 13.4.1
Browser: Google Chrome Version 114.0.5735.198 (Official Build) (arm64)

Additional Information

This problem becomes more noticeable when the app is embedded in an iframe and it is managed with iframe-resizer like the HTML page below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #app {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <iframe id="app" src="http://localhost:8501?embed=true" frameborder="0"></iframe>
    <script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.6/js/iframeResizer.min.js"></script>
    <script>
    iFrameResize({ log: true }, '#app')
    </script>
</body>
</html>

My hypothesis on what happens here is as follows:

When the cursor hovers on the image, the fullscreen button appears outside the frame, which makes the page wider.
The horizontal scrollbar appears.
It makes the height of the visible area of the iframe shrunk so that it's smaller than the child page height.
The vertical scrollbar appears.
It makes the width of the visible area of the iframe shrunk, then the child page width is also made smaller.

The situation becomes even worse when there are multiple image components with the fullscreen button as the flow described above on each component resonates and the page shakes.

jrieke · 2023-07-12T16:27:35Z

Yeah this is super annoying. We have a plan to revamp the fullscreen icon in the next few months, so this doesn't produce any issues anymore. Hopefully it's better then!

## Describe your changes As of now, our full screen button goes outside of the boundary, which in some viewports can cause overflowing widths to make the container scrollable. We intend to make the full screen button experience not as bad, but for now, the solution is to reduce the content area size when we hit this threshold. ## GitHub Issue Link (if applicable) Closes #6990 ## Testing Plan - E2E Test to capture the look created from the bug. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

## Describe your changes As of now, our full screen button goes outside of the boundary, which in some viewports can cause overflowing widths to make the container scrollable. We intend to make the full screen button experience not as bad, but for now, the solution is to reduce the content area size when we hit this threshold. ## GitHub Issue Link (if applicable) Closes streamlit#6990 ## Testing Plan - E2E Test to capture the look created from the bug. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

whitphx added status:needs-triage Has not been triaged by the Streamlit team type:bug Something isn't working labels Jul 12, 2023

LukasMasuch added status:confirmed Bug has been confirmed by the Streamlit team priority:P2 and removed status:needs-triage Has not been triaged by the Streamlit team labels Jul 12, 2023

sfc-gh-mbarnes added feature:st.file_uploader priority:P3 and removed status:confirmed Bug has been confirmed by the Streamlit team labels Aug 8, 2023

sfc-gh-jcarroll added status:confirmed Bug has been confirmed by the Streamlit team and removed feature:st.file_uploader priority:P3 labels Aug 8, 2023

LukasMasuch added area:ux/ui feature:st.image feature:builtin-charts labels Jan 17, 2024

kmcgrady self-assigned this Mar 4, 2024

kmcgrady mentioned this issue Mar 12, 2024

Fullscreen Button Overflow Horizontally #8279

Merged

kmcgrady closed this as completed in #8279 Mar 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

There is not enough margin between the main area and the page edges in some screen width. #6990

There is not enough margin between the main area and the page edges in some screen width. #6990

whitphx commented Jul 12, 2023 •

edited by LukasMasuch

jrieke commented Jul 12, 2023

There is not enough margin between the main area and the page edges in some screen width. #6990

There is not enough margin between the main area and the page edges in some screen width. #6990

Comments

whitphx commented Jul 12, 2023 • edited by LukasMasuch

Checklist

Summary

Reproducible Code Example

Steps To Reproduce

Expected Behavior

Current Behavior

Is this a regression?

Debug info

Additional Information

jrieke commented Jul 12, 2023

whitphx commented Jul 12, 2023 •

edited by LukasMasuch