Adjust admin UI components based on desired interface density

client/scss/components/_chooser.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $preview-size: 2.625rem; // 42px
 
 .chooser {
@@ -61,8 +63,20 @@ $preview-size: 2.625rem; // 42px
 }
 
 .chooser__image {
-  max-width: 165px;
-  max-height: 125px;
+  $max-width: 165px;
+  $max-height: 125px;
+
+  // Adjust thumbnail size based on UI density, with safe minimums and maximums.
+  max-width: clamp(
+    math.div($max-width, 2),
+    calc($max-width * var(--w-density-factor)),
+    $max-width
+  );
+  max-height: clamp(
+    math.div($max-height, 2),
+    calc($max-height * var(--w-density-factor)),
+    $max-height
+  );
   height: auto;
   width: auto;
 }

client/scss/components/_listing.scss

@@ -27,10 +27,10 @@ ul.listing {
 
   td,
   th {
-    padding: 1.2em 0.3em;
+    padding: calc(1em * var(--w-density-factor)) 0.3em;
 
     @include media-breakpoint-up(sm) {
-      padding: 1.2em 1em;
+      padding: calc(1em * var(--w-density-factor)) 1em;
     }
 
     &.no-padding {
@@ -48,16 +48,11 @@ ul.listing {
   }
 
   td {
-    vertical-align: top;
+    vertical-align: middle;
   }
 
   td.title {
     line-height: 2em;
-    padding: 1em 0.3em;
-
-    @include media-breakpoint-up(sm) {
-      padding: 1em;
-    }
   }
 
   thead {
@@ -248,7 +243,7 @@ ul.listing {
       }
     }
 
-    .icon.initial {
+    .icon-folder {
       margin: 3px 0.3em 0 0;
       vertical-align: top;
     }

client/scss/components/_panel.scss

@@ -3,7 +3,9 @@ $header-button-size: theme('spacing.6');
 
 .w-panel {
   --header-gap: 0;
-  margin-bottom: theme('spacing.10');
+  margin-bottom: calc(
+    theme('spacing.5') + theme('spacing.5') * var(--w-density-factor)
+  );
 
   @include media-breakpoint-up(sm) {
     --header-gap: theme('spacing.4');

client/scss/components/forms/_field.scss

@@ -63,7 +63,7 @@
 
 .w-field__input {
   position: relative;
-  margin-top: theme('spacing.[2.5]');
+  margin-top: calc(theme('spacing.[2.5]') * var(--w-density-factor));
 }
 
 .w-field__icon {

client/scss/components/forms/_title.scss

@@ -35,6 +35,10 @@
     padding-inline-start: theme('spacing[1.5]');
     margin-inline-start: calc(-1 * theme('spacing[1.5]'));
 
+    .w-density-snug & {
+      font-size: theme('fontSize.26');
+    }
+
     // Avoid calling attention to the field _unless_ it’s in one of those states.
     &:not(:hover, :focus, :placeholder-shown, [aria-invalid='true']) {
       // Hide w/ transparency to preserve border size and show it in forced-colors mode.