♻️ [#3178] Re-arrange markup/CSS for page layout

src/openforms/ui/static/ui/scss/components/_page.scss

@@ -1,32 +1,45 @@
 /**
  * Style overrides for the utrecht-page component.
  */
+@import '~microscope-sass/lib/responsive';
+
 .openforms-theme {
   .utrecht-page {
     // backwards compatibility
     // TODO: remove in Open Forms 3.0
     --utrecht-page-max-inline-size: 100%;
+
+    @include desktop {
+      --utrecht-page-max-inline-size: 1200px;
+    }
+
     --utrecht-page-background-color: var(
       --of-view-background,
       var(--of-layout-background, #e6e6e6)
     );
 
     margin-block-end: var(--of-utrecht-page-margin-block-end, 0);
     margin-block-start: var(--of-utrecht-page-margin-block-start, 0);
+    background-color: var(--utrecht-page-background-color);
 
-    // ensure the page content spans the entire height of the viewport
+    // ensure the page content spans the entire height & width of the viewport
     display: flex;
     flex-direction: column;
     min-block-size: 100vh;
+    max-inline-size: 100vw;
 
     // can't use the bem modules because of the nested parent selector(s)
     > .utrecht-page__content {
       flex-grow: 1;
+      inline-size: 100%;
+      margin-inline-end: auto;
+      margin-inline-start: auto;
     }
 
     > .utrecht-page-header,
     > .page-footer {
       flex-shrink: 0;
+      align-items: stretch;
     }
   }
 }