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>
            """