Ensure body.scrollHeight matches the visible content height

The consent form's scrollable .content div (with overflow-y: auto and a
scrollHeight of 1984px) was inflating body.scrollHeight to 2026px, even
though the visible content was only 1314px.

- Made html the scroll container (overflow-y: auto) instead of body
- Set body to overflow-y: visible and height: fit-content so it matches
visible content only
- Added contain: layout style to the consent form content to isolate its
scrollable area

Author: jsoningram

src/app/globals.css

@@ -183,14 +183,12 @@
   color-scheme: light;
 }
 
-/* We don't have a dark theme... yet */
 [data-theme='dark'] {
   --background: #ffffff;
   --foreground: #171717;
   color-scheme: dark;
 }
 
-/* Default to system preference before JS loads */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --background: #ffffff;
@@ -199,13 +197,17 @@
   }
 }
 
-html,
-body {
+html {
   max-width: 100vw;
   overflow-x: hidden;
+  overflow-y: auto;
 }
 
 body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  overflow-y: visible;
+  height: fit-content;
   color: var(--foreground);
   background: var(--background);
   font-family: var(--Font-Family-Product);

src/app/layout.module.css

@@ -23,6 +23,7 @@
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
+  background-attachment: scroll;
   font-family: var(--Font-Family-Product);
   position: relative;
 }

src/components/consent-form/consent-form.module.css

@@ -42,7 +42,6 @@
 
 .link {
   color: var(--sds-color-palette-blue-60);
-  /* Inherit all other styles from parent paragraph */
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
@@ -77,10 +76,10 @@
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
+  contain: layout style;
 
   .section {
     flex: 1 1 0%;
-    /* Use 0% basis for proper flex behavior */
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
@@ -94,7 +93,6 @@
       line-height: 24px;
       margin-block: 1em;
       overflow-wrap: break-word;
-      /* Wrap long words at word boundaries when necessary */
       max-width: 100%;
       box-sizing: border-box;
     }
@@ -133,7 +131,6 @@
   background-color: white;
   border: 2px solid #e0e0e0;
   color: #212121;
-  /* Override primary button text color for cancel button */
 }
 
 .cancelButton:hover {