User: I have this html template in which I insert html plots, which are accessible by tabs. Can you improve this by (1) Restricting plot size to screen
(2) Putting the tabs buttons horizontally instead of vertically 

html_content = f"""
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Tabbed Plot Viewer</title>
                <style>
                    body {{
                        font-family: Arial, sans-serif;
                    }}
                    .tab {{
                        display: none;
                    }}
                    .tab-button {{
                        padding: 10px;
                        cursor: pointer;
                        border: 1px solid #ddd;
                        border-bottom: none;
                        background-color: #f1f1f1;
                        margin-right: 5px;
                    }}
                    .tab-button:hover {{
                        background-color: #e7e7e7;
                    }}
                    .tab-content {{
                        border: 1px solid #ddd;
                        padding: 10px;
                    }}
                    .active {{
                        display: block;
                    }}
                </style>
            </head>
            <body>

            <h1>Interactive Plots</h1>
            <div>
                <button class="tab-button" onclick="openTab(event, 'Plot1')">Plot 1</button>
                <button class="tab-button" onclick="openTab(event, 'Plot2')">Plot 2</button>
            </div>

            <div id="Plot1" class="tab tab-content">
                {st.session_state.chain_base.get_map(withDarkMode=False)._repr_html_()}
            </div>

            <div id="Plot2" class="tab tab-content">
                {pyg.to_html(st.session_state.chain_tess_output.drop("geometry", axis=1))}
            </div>

            <script>
                function openTab(evt, tabName) {{
                    var i, tabcontent, tabbuttons;
                    
                    // Hide all tab content
                    tabcontent = document.getElementsByClassName("tab");
                    for (i = 0; i < tabcontent.length; i++) {{
                        tabcontent[i].style.display = "none";
                    }}

                    // Remove the active class from all buttons
                    tabbuttons = document.getElementsByClassName("tab-button");
                    for (i = 0; i < tabbuttons.length; i++) {{
                        tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
                    }}

                    // Show the current tab and add an "active" class to the button that opened the tab
                    document.getElementById(tabName).style.display = "block";
                    evt.currentTarget.className += " active";
                }}

                // Automatically open the first tab
                document.getElementsByClassName("tab-button")[0].click();
            </script>

            </body>
            </html>
            """
Assistant: To enhance your HTML template according to your requirements, we will make the following changes:

1. **Restrict the plot size to the screen**: We can achieve this by setting a maximum width and height for the `.tab-content` class. Additionally, we can ensure the plots scale down nicely on smaller screens.
2. **Display the tab buttons horizontally**: To achieve a horizontal layout, we can use flexbox on the container of the tab buttons.

Here’s the improved HTML template reflecting these changes:

```python
html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed Plot Viewer</title>
    <style>
        body {{
            font-family: Arial, sans-serif;
        }}
        .tab {{
            display: none;
        }}
        .tab-button-wrapper {{
            display: flex; /* Use flexbox for horizontal layout */
            border-bottom: 1px solid #ddd; /* Visual separation for tabs */
        }}
        .tab-button {{
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #f1f1f1;
            margin-right: 5px;
            border-radius: 4px 4px 0 0; /* Rounded corners for the top */
        }}
        .tab-button:hover {{
            background-color: #e7e7e7;
        }}
        .tab-content {{
            border: 1px solid #ddd;
            padding: 10px;
            max-width: 100vw; /* Restrict to screen width */
            max-height: 80vh; /* Restrict to 80% of the viewport height */
            overflow: auto; /* Enable scrolling for overflow */
        }}
        .active {{
            display: block;
        }}
    </style>
</head>
<body>

<h1>Interactive Plots</h1>
<div class="tab-button-wrapper">
    <button class="tab-button" onclick="openTab(event, 'Plot1')">Plot 1</button>
    <button class="tab-button" onclick="openTab(event, 'Plot2')">Plot 2</button>
</div>

<div id="Plot1" class="tab tab-content">
    {st.session_state.chain_base.get_map(withDarkMode=False)._repr_html_()}
</div>

<div id="Plot2" class="tab tab-content">
    {pyg.to_html(st.session_state.chain_tess_output.drop("geometry", axis=1))}
</div>

<script>
    function openTab(evt, tabName) {{
        var i, tabcontent, tabbuttons;
        
        // Hide all tab content
        tabcontent = document.getElementsByClassName("tab");
        for (i = 0; i < tabcontent.length; i++) {{
            tabcontent[i].style.display = "none";
        }}

        // Remove the active class from all buttons
        tabbuttons = document.getElementsByClassName("tab-button");
        for (i = 0; i < tabbuttons.length; i++) {{
            tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
        }}

        // Show the current tab and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }}

    // Automatically open the first tab
    document.getElementsByClassName("tab-button")[0].click();
</script>

</body>
</html>
"""
```

### Key Changes:
- Introduced a `.tab-button-wrapper` class with `display: flex` for horizontal placement of the buttons.
- Set `max-width: 100vw;` and `max-height: 80vh;` on `.tab-content` to restrict the size of plots relative to the viewport. This approach also uses `overflow: auto;` to enable scrolling within the plot content if it exceeds the height.
- Added a light border at the bottom of the tab buttons to visually separate them from the content area.

With these updates, your HTML template will be more user-friendly, ensuring that plots remain accessible and visually organized on various screen sizes.
User: Okay, I have some data which I want the user to be able to export from this template as a csv. How do I do that from a third tab?
Assistant: