Keep Footer Positioned at the Bottom of the Page

Issue Description:
The page footer currently appears to float above the bottom of the page when there is not enough content to fill the full screen height. This makes the layout look incomplete and leaves unnecessary empty space below the footer.

Update the page layout so that the footer stays at the bottom of the viewport while still moving naturally below the page content when the content is longer than the screen.

Expected Behavior:
The footer should remain aligned with the bottom of the page when content is limited and should not appear floating in the middle of the screen.

UI:

Start by running the page with content that does not fill the viewport and inspect the page layout and footer styling. Verify the footer reaches the bottom when content is short, remains below the content when it is long, and does not leave unnecessary space beneath it.

Written by the indexing model from the issue text.