Keep footer at viewport bottom on pages with little content

[adia]

Summary

On pages with little content (such as /accounts/login/, confirmation pages, password reset, etc.), the footer currently sits directly underneath the content in the middle of the screen, leaving empty whitespace below.

Changes

• In templates/gcd/tw_base.html, set the wrapper container to flex flex-col min-h-screen and added mt-auto to the fine_print block container.
• In static/css/output.css, added the .min-h-screen utility class (min-height: 100vh;).

Behavior

• On short pages, the footer stays pinned to the bottom of the viewport.
• On pages with content taller than the viewport, the container grows and the footer sits directly below the content as normal.

[gemini-code-assist]

Code Review

This pull request introduces layout changes to the base template templates/gcd/tw_base.html to establish a full-height flexbox container, pushing the footer to the bottom using mt-auto. It also manually adds the .min-h-screen utility class to the compiled static/css/output.css file. The feedback advises against manually editing the compiled CSS file as it will be overwritten during the next build. Additionally, it is recommended to use min-h-dvh instead of min-h-screen to prevent layout issues on mobile devices where dynamic browser bars can affect viewport height calculations.

[gemini-code-assist]

The static/css/output.css file is a compiled asset generated by Tailwind CSS. Manually editing this file is discouraged because any subsequent build or compilation process will overwrite these changes, leading to lost styles. Since templates/gcd/tw_base.html is included in the Tailwind configuration's content paths, running the Tailwind build command will automatically detect the new class and append it to output.css. Please revert this manual change and regenerate the CSS file using the build pipeline.

[gemini-code-assist]

Using min-h-screen (which translates to min-height: 100vh) can cause layout issues on mobile devices because 100vh does not account for the dynamic browser address/navigation bars, often pushing the footer below the visible viewport boundary. Since the project is using Tailwind CSS v3.4.1, you can leverage min-h-dvh (Dynamic Viewport Height) to ensure the container perfectly fits the viewport on all devices, including mobile browsers.

<div class="flex flex-col min-h-dvh{% if preview %} bg-preview{% endif %}">