[OCaml] High Intensity Training Online
fix Fit sign-in and register in one screen
The auth pages scrolled on narrow screens. The shell kept 6.75rem at the bottom for the navigation bar, which these pages do not have. On narrow screens, main was also 100vh minus 9rem tall, and the footer followed it. On pages with the page-auth class, the shell is now a column as tall as the viewport. Main takes the free height, so the footer sits at the bottom edge and the page does not scroll. The shell uses 100dvh where the browser supports it, so mobile toolbars do not cause overflow. Taller content, such as an error on a small screen, still scrolls.
lib/web/assets/hito.css
@@ -152,6 +152,23 @@
152
152
padding: 0 0.75rem calc(6.75rem + env(safe-area-inset-bottom));
153
153
}
154
154
155
Added:
/* Sign-in and registration fit one screen. They have no bottom navigation, so
156
Added:
they keep no space for it. The shell is as tall as the viewport and the
157
Added:
content takes the free height, so the footer sits at the bottom edge and
158
Added:
the page does not scroll. Taller content still scrolls. */
159
Added:
.app-shell.page-auth {
160
Added:
display: flex;
161
Added:
flex-direction: column;
162
Added:
min-height: 100vh;
163
Added:
min-height: 100dvh;
164
Added:
padding-bottom: env(safe-area-inset-bottom);
165
Added:
}
166
Added:
.page-auth main {
167
Added:
flex: 1 0 auto;
168
Added:
min-height: 0;
169
Added:
}
170
Added:
.page-auth .site-footer { margin-top: 0; }
171
Added:
155
172
/* The blood bar is the header's base edge and the brand marker. It belongs
156
173
to the masthead, not to the content. */
157
174
.masthead {