White space left of sidebar and column alignment (Dash Design)

Hi,

  I am trying to build a dashboard using plotly dash for the first time from a remote ubuntu server. There are a couple of design question that needs some advice.

(1) There is always a huge white space from the left sidebar (blue) and the remaining columns shifts to the right. How can I ensure the blue side bar always start from the left most screen edge (regardless of screen size).

(2) I used T.body for the footer text but it doesn’t appear to be at the bottom of the column. How can I ensure that appear at the bottom regardless of screen size instead of many html.Br()? I tried T.footer() but it flips the multiple sentence text from bottom to top instead of a text block.

(3) Is there a way to dynamically adjust the width on the whitespace (i.e. some content) depending on the screensize? Assume that the screen is always in desktop landscape mode (i.e. ignore it will be on a small screen like a phone).

Here is a dummy code I wrote this:

app = Dash(__name__, 
    external_stylesheets=[dbc.themes.SPACELAB],
    )
sidebar = dbc.Card([
    dbc.CardBody([
        html.H4("Visualization Options", className="display", style={'color':'white'}),
        html.Div(
            [   html.P("Option A", className="display", style={'color':'white'}),
                
            ]
        ),
        html.Div(
            [   
                html.P("Option B", className="display", style={'color':'white'}),
            ]
        ),
        html.Div(
            [   html.H3("Some Table", className="display", style={'color':'white', 'text-align':'center'}),
            ], style={'margin-top': '10rem', 'text-align':'left'}
        ),
        
        html.Div([
        html.Footer(
            [html.Tbody("Footer", style={"color":"white", "font-size":"14px", "text-align":"center"}),
        ]),
        ]),
    ]),
], color="blue", style={"height":"100vh", "width": "24rem", "position": "fixed"})


sidebar2 = dbc.Card([
        dbc.CardBody([
            html.Br(),
            html.Div(
                [   
                    html.H4("Visualization #2", className="display", style={'color':'white', 'text-align':'center'}),
                ]
            ),
            
        ])
    ], color="dark", style={"height":"100%", "width": "24rem", "position": "fixed"})

content = html.Div([
    html.H1("Dummy Demo"),
    
], style={
            "display": "inline-block",
            "overflow": "hidden"
        })

app.layout = dbc.Container([

    dbc.Row([
        dbc.Col(sidebar, width="24rem", style={"margin-left": "auto", 'textAlign':'center'}),
        dbc.Col(sidebar2, width="24rem", style={"margin-left": "24rem", 'textAlign':'center'}),
        dbc.Col(content, style={"margin-left": "48rem", 'textAlign':'center'}),
    ]),
])

app.title = 'Web Demo Tab Title'

if __name__ == "__main__":
    app.run_server(debug=True, threaded=True, host='0.0.0.0')

Thanks,
Harris