fix: app config page padding property is properly interpreted as shorthand

src/app/app.component.ts

@@ -42,6 +42,7 @@ import { LocalStorageService } from "./shared/services/local-storage/local-stora
 import { DeploymentService } from "./shared/services/deployment/deployment.service";
 import { ScreenOrientationService } from "./shared/services/screen-orientation/screen-orientation.service";
 import { TemplateMetadataService } from "./shared/components/template/services/template-metadata.service";
+import { getPaddingValuesFromShorthand } from "./shared/components/template/utils";
 
 @Component({
   selector: "app-root",
@@ -56,8 +57,12 @@ export class AppComponent {
 
   public routeContainerStyle = computed(() => {
     const { page_padding } = this.layoutConfig();
+    const { top, right, bottom, left } = getPaddingValuesFromShorthand(page_padding);
     return {
-      "--page-padding": page_padding,
+      "--page-padding-top": top,
+      "--page-padding-start": left,
+      "--page-padding-bottom": bottom,
+      "--page-padding-end": right,
     };
   });
 

src/app/shared/components/template/components/layout/display-group/display-group.component.scss

@@ -52,8 +52,7 @@
 
 .display-group-wrapper[data-variant~="inline_padding"] {
   width: 100%;
-  padding-left: var(--padding-start);
-  padding-right: var(--padding-end);
+  padding-inline: var(--default-page-padding);
 }
 
 .display-group-wrapper {

src/app/shared/components/template/utils/render-utils.spec.ts

@@ -0,0 +1,34 @@
+import { getPaddingValuesFromShorthand } from "./render-utils";
+
+/**
+ * Call standalone tests via:
+ * yarn ng test --include src/app/shared/components/template/utils/render-utils.spec.ts
+ */
+describe("Data Items Utils", () => {
+  it("getPaddingValuesFromShorthand extracts correct values", () => {
+    expect(getPaddingValuesFromShorthand("10px")).toEqual({
+      top: "10px",
+      right: "10px",
+      bottom: "10px",
+      left: "10px",
+    });
+    expect(getPaddingValuesFromShorthand("10px 20px")).toEqual({
+      top: "10px",
+      right: "20px",
+      bottom: "10px",
+      left: "20px",
+    });
+    expect(getPaddingValuesFromShorthand("10px 20px 30px")).toEqual({
+      top: "10px",
+      right: "20px",
+      bottom: "30px",
+      left: "20px",
+    });
+    expect(getPaddingValuesFromShorthand("10px 20px 30px 40px")).toEqual({
+      top: "10px",
+      right: "20px",
+      bottom: "30px",
+      left: "40px",
+    });
+  });
+});

src/app/shared/components/template/utils/render-utils.ts

@@ -70,3 +70,10 @@ export function setElStyleAnimated(
     return;
   });
 }
+
+/** Extract constituent directional values from shorthand padding CSS value */
+export function getPaddingValuesFromShorthand(padding: string) {
+  const paddingArray = padding.split(" ");
+  const [top, right = top, bottom = top, left = right] = paddingArray;
+  return { top, right, bottom, left };
+}

src/theme/deployment/_overrides.scss

@@ -5,11 +5,11 @@ plh-button > ion-button {
 
 /// Ensure all pages have padding
 ion-content {
-  $default-padding: 24px;
-  --padding-top: var(--page-padding, #{$default-padding});
-  --padding-bottom: var(--page-padding, #{$default-padding});
-  --padding-start: var(--page-padding, #{$default-padding});
-  --padding-end: var(--page-padding, #{$default-padding});
+  --default-page-padding: 24px;
+  --padding-top: var(--page-padding-top, var(--default-page-padding));
+  --padding-bottom: var(--page-padding-bottom, var(--default-page-padding));
+  --padding-start: var(--page-padding-start, var(--default-page-padding));
+  --padding-end: var(--page-padding-end, var(--default-page-padding));
 
   // HACK: prevent scrollbar from hiding when interacting with ion-range, for example (this can cause visual glitches).
   // see https://github.com/ionic-team/ionic-framework/issues/25595#issuecomment-1330293954