Safe body paddings with env() and max() support

safe-padding.css

/* size variables */

:root {
  --md: 8px;
  --md-2: calc(var(--md) * 2);
  --md-3: calc(var(--md) * 3);
  --md-4: calc(var(--md) * 4);
}

/* safe area defaults */

body {
  --safeAreaTop: 0;
  --safeAreaBottom: 0;
  --safeAreaLeft: 0;
  --safeAreaRight: 0;
  --viewportTargetPadding: var(--md-4);
}
@media only screen and (max-width: 480px) {
  body {
    --viewportTargetPadding: var(--md-3);
  }
}

/* set safeArea vars if supported */

@supports (padding-top: env(safe-area-inset-top, 0)) {
  body {
    --safeAreaTop: env(safe-area-inset-top, 0);
    --safeAreaBottom: env(safe-area-inset-bottom, 0);
    --safeAreaLeft: env(safe-area-inset-left, 0);
    --safeAreaRight: env(safe-area-inset-right, 0);
  }
}

/* define viewportPadding* vars defaults */

body {
  --viewportPaddingTop: calc(var(--viewportTargetPadding) + var(--safeAreaTop));
  --viewportPaddingBottom: calc(var(--viewportTargetPadding) + var(--safeAreaBottom));
  --viewportPaddingLeft: calc(var(--viewportTargetPadding) + var(--safeAreaLeft));
  --viewportPaddingRight: calc(var(--viewportTargetPadding) + var(--safeAreaRight));
}

/* use max padding if supported */

@supports (padding: max(0px)) {
  body {
    --viewportPaddingTop: max(
      calc(var(--viewportTargetPadding) / 2),
      var(--safeAreaTop)
    );
    --viewportPaddingBottom: max(
      calc(var(--viewportTargetPadding) / 2),
      var(--safeAreaBottom)
    );
    --viewportPaddingLeft: max(
      var(--viewportTargetPadding),
      var(--safeAreaLeft)
    );
    --viewportPaddingRight: max(
      var(--viewportTargetPadding),
      var(--safeAreaRight)
    );
  }
}

/* assign results to the body */

body {
  padding-top: var(--viewportPaddingTop);
  padding-bottom: var(--viewportPaddingBottom);
  padding-left: var(--viewportPaddingLeft);
  padding-right: var(--viewportPaddingRight);
  height: calc(100vh - var(--viewportPaddingTop) - var(--viewportPaddingBottom));
  margin: 0;
}