@designcrowd/library.brand-page 5.18.4 → 5.18.6-ast-padding-1

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3445,6 +3445,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3494,6 +3496,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3543,6 +3547,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3592,6 +3598,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3641,6 +3649,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -3690,6 +3700,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                        topPadding?: number | undefined;
+                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -4450,6 +4462,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                    topPadding?: number | undefined;
+                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -87,7 +87,17 @@ const findAssetKey = (assets, data) => {
     return assets.find((a) => a.data === data)?.key;
 };
 const minifyContent = (content, editor, assets) => {
-    const base = { id: content.id, type: content.type };
+    const base = {
+        id: content.id,
+        type: content.type,
+        // Padding Control (BP-5687) — shared across every block, persist when set.
+        ...(typeof content.topPadding === 'number' && {
+            topPadding: content.topPadding,
+        }),
+        ...(typeof content.bottomPadding === 'number' && {
+            bottomPadding: content.bottomPadding,
+        }),
+    };
     const c = content;
     // Helper: include imageUrl and its asset key if available
     const includeImageWithKey = (url, urlField = 'imageUrl', keyField = 'imageAssetKey') => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.18.4",
+  "version": "5.18.6-ast-padding-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/about-section/AboutSection.vue

@@ -7,9 +7,10 @@
     <div
       :class="{
         'about-container': context.isBrandSite,
-        'about-container--padding tw-py-10': !isFullImage,
+        'about-container--padding': !isFullImage,
         'mobile-about-container--padding': isFullImage,
       }"
+      :style="contentPaddingStyle"
     >
       <Media
         v-if="
@@ -103,7 +104,10 @@
 import { computed } from 'vue';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -123,6 +127,10 @@ const props = withDefaults(
   },
 );
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const isFullImage = computed(
   () =>
     props.viewModel.displayStyle === 'right-aligned-full-image' ||
@@ -201,7 +209,6 @@ const renderText = computed((): string => {
 .device-wrapper--mobile .mobile-about-container--padding {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
-  @apply tw-py-10;
 }
 .device-wrapper--mobile .text-grid-column {
   @apply container-grid-columns;
@@ -275,7 +282,6 @@ const renderText = computed((): string => {
   .mobile-about-container--padding {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
-    @apply tw-py-10;
   }
   .about-container :deep(.container-image) {
     aspect-ratio: 1/1;

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -7,9 +7,8 @@
           viewModel.isBigImageType,
         'c_banner--with-image-overlay tw-flex tw-flex-col': isDividedContent,
         'tw-px-6': !isDividedContent,
-        'tw-py-8': !isDividedContent && !isStackedFullWidth,
       }"
-      :style="viewModel.backgroundStyle"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <Media
@@ -201,7 +200,7 @@
             <div
               class="!tw-text-center tw-flex tw-flex-col tw-gap-5"
               :class="{
-                'tw-px-6 tw-py-8': isDividedContent,
+                'tw-px-6': isDividedContent,
               }"
             >
               <TextWrapper
@@ -332,7 +331,11 @@ import type {
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 import { hasValidButton } from '../../../utils/validator.util';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
+import {
+  getRenderText,
+  escapeContentText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import {
   ALIGN_CENTERED,
@@ -490,6 +493,10 @@ const layout = computed<BannerLayoutConfig>(
   () => BANNER_LAYOUTS[props.viewModel.displayStyle] ?? DEFAULT_LAYOUT,
 );
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const displayAlignClass = computed(() => layout.value.alignClass);
 const isHorizontalAligned = computed(() => !!layout.value.hasSideImage);
 const isDividedContent = computed(() => layout.value.layout === 'divided');

package/src/brand-page/components/booking-section/BookingSection.vue

@@ -1,8 +1,8 @@
 <template>
   <section data-component="booking-section">
     <div
-      class="tw-relative tw-px-6 tw-py-8"
-      :style="viewModel.backgroundStyle"
+      class="tw-relative tw-px-6"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <div
@@ -45,7 +45,11 @@ import type {
   ButtonViewModel,
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
+import {
+  getRenderText,
+  escapeContentText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
 import Button from '../button/Button.vue';
@@ -71,6 +75,10 @@ const props = defineProps({
   },
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const renderText = computed((): string => {
   if (!props.viewModel.description) {
     return '';

package/src/brand-page/components/button/Button.vue

@@ -253,21 +253,13 @@ const onCloseModal = (): void => {
   text-decoration: none;
 }
 
-/* Shape-library icons (vector, nested in .c-shape, no class on the img):
-   render at the default icon size, centered in normal flow like the SVG icons. */
 .bp-button :deep(.c-button__icon-img img) {
   @apply tw-object-cover tw-max-w-none;
-  width: var(--icon-w);
-  height: var(--icon-h);
-}
-
-/* Raster image thumbnails (FallbackImage renders <img class="c-image">):
-   render larger/prominent and centered over the icon slot. */
-.bp-button :deep(.c-button__icon-img img.c-image) {
   --icon-img-size: 2.3rem;
+  --icon-img-offset-x: calc((var(--button-p-x) - var(--button-p-y)) * 2);
   position: absolute;
   top: calc(var(--icon-img-size) / -2 + var(--icon-h) / 2);
-  left: calc(var(--icon-img-size) / -2 + var(--icon-w) / 2);
+  left: calc(var(--icon-img-size) / -2 + var(--icon-img-offset-x));
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }

package/src/brand-page/components/contact-form/ContactForm.mixin.ts

@@ -25,7 +25,10 @@ import {
   RECAPTCHA_ACTION_CONTACT_FORM,
   TEXT_ONLY,
 } from '../../constants';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
@@ -97,6 +100,10 @@ export default defineComponent({
       return buttonTextStyle;
     },
 
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasCard(): boolean {
       return (
         this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
@@ -109,11 +116,10 @@ export default defineComponent({
     },
 
     hasBgColor(): boolean {
-      return (
-        this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
-        this.viewModel.layoutStyle === TEXT_ONLY ||
-        this.viewModel.layoutStyle === ALIGN_CENTERED
-      );
+      // Every brandSite layout applies the background colour on the section
+      // root (banner-style) so the padding control reveals it; for the image
+      // layouts it only shows in the padding bands around the image block.
+      return Boolean(this.viewModel.layoutStyle);
     },
 
     isCenteredLayout(): boolean {

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -1,24 +1,12 @@
 <template>
   <section data-component="contact-form">
     <div
-      :class="{
-        'tw-flex': isCenteredLayout && !hasBgImage,
-        'tw-block': !viewModel.layoutStyle,
-        'tw-relative': hasBgImage,
-      }"
-      :style="hasBgColor ? viewModel.backgroundStyle : {}"
+      :class="{ 'tw-block': !viewModel.layoutStyle }"
+      :style="[
+        hasBgColor ? viewModel.backgroundStyle : {},
+        contentPaddingStyle,
+      ]"
     >
-      <Media
-        v-if="hasBgImage && isCenteredLayout"
-        :image-url="viewModel.imageUrl"
-        :color-replacements="viewModel.colorReplacements"
-        :context="context"
-        :media-type="viewModel.mediaType"
-        :role="viewModel.role"
-        :size="viewModel.size"
-        :content-index="contentIndex"
-        img-classes="tw-w-full tw-h-full tw-object-cover tw-absolute tw-left-0 tw-top-0 tw-overflow-hidden"
-      />
       <Collapsible
         v-if="
           !viewModel.layoutStyle ||
@@ -108,110 +96,125 @@
       </Collapsible>
       <div
         v-else-if="isCenteredLayout"
-        class="contact-container tw-py-4"
-        :class="{
-          'tw-px-6 tw-py-8': hasCard,
-          'tw-py-6': !hasCard,
-          'tw-w-full': !hasBgImage,
-        }"
+        :class="{ 'tw-relative': hasBgImage, 'tw-flex': !hasBgImage }"
       >
+        <Media
+          v-if="hasBgImage"
+          :image-url="viewModel.imageUrl"
+          :color-replacements="viewModel.colorReplacements"
+          :context="context"
+          :media-type="viewModel.mediaType"
+          :role="viewModel.role"
+          :size="viewModel.size"
+          :content-index="contentIndex"
+          img-classes="tw-w-full tw-h-full tw-object-cover tw-absolute tw-left-0 tw-top-0 tw-overflow-hidden"
+        />
         <div
-          :style="hasCard ? viewModel.cardStyle : {}"
-          class="tw-relative tw-block tw-px-6 tw-py-8 tw-rounded-2xl"
+          class="contact-container"
+          :class="{
+            'tw-px-6': hasCard,
+            'tw-py-8': hasBgImage,
+            'tw-w-full': !hasBgImage,
+          }"
         >
-          <form v-if="!hasSubmitted" @submit.prevent="submitContactForm">
-            <TextWrapper
-              v-if="viewModel.title"
-              :text-style="viewModel.titleStyle"
-              :text="viewModel.title"
-              element="h1"
-              class="tw-mb-4 tw-text-base"
-            />
-            <TextWrapper
-              v-if="renderText"
-              :text-style="viewModel.descriptionStyle"
-              :text="renderText"
-              element="div"
-              class="tw-mb-4 tw-text-base"
-            />
-            <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
-              <div
-                v-for="(value, index) in values"
-                :key="index"
-                class="tw-text-secondary-500 c-col-span-2"
-                :class="{
-                  'tw-col-span-2':
-                    value.field.type === 'text-area' || isMobileDevice,
-                }"
-              >
-                <TextInput
-                  v-if="value.field.type !== 'text-area'"
-                  v-model="value.value"
-                  :placeholder="`${value.field.name}${
-                    value.field.required ? '*' : ''
-                  }`"
-                  :label="`${value.field.name}${value.field.required ? '*' : ''}`"
-                  :show-label-screen-reader-only="true"
-                  size="sm"
-                  :error="!!value.error"
-                  :type="getTextInputTypeByFieldType(value.field.type)"
-                  class="tw-w-full"
-                  @input="onValueChange(index)"
-                />
-                <Textarea
-                  v-if="value.field.type === 'text-area'"
-                  v-model="value.value"
-                  :placeholder="`${value.field.name}${
-                    value.field.required ? '*' : ''
-                  }`"
-                  :label="`${value.field.name}${value.field.required ? '*' : ''}`"
-                  :show-label-screen-reader-only="true"
-                  size="sm"
-                  :error="!!value.error"
-                  :resize="false"
-                  class="tw-w-full"
-                  @input="onValueChange(index)"
-                />
-                <p v-if="!!value.error" class="form-error">
-                  {{ value.error }}
-                </p>
-              </div>
-              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
-                <button
-                  v-if="isSubmitButtonVisible"
-                  class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
-                  :style="submitButtonStyle"
-                  :class="{ 'tw-w-full': isMobileDevice }"
+          <div
+            :style="hasCard ? viewModel.cardStyle : {}"
+            class="tw-relative tw-block tw-px-6 tw-py-8 tw-rounded-2xl"
+          >
+            <form v-if="!hasSubmitted" @submit.prevent="submitContactForm">
+              <TextWrapper
+                v-if="viewModel.title"
+                :text-style="viewModel.titleStyle"
+                :text="viewModel.title"
+                element="h1"
+                class="tw-mb-4 tw-text-base"
+              />
+              <TextWrapper
+                v-if="renderText"
+                :text-style="viewModel.descriptionStyle"
+                :text="renderText"
+                element="div"
+                class="tw-mb-4 tw-text-base"
+              />
+              <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
+                <div
+                  v-for="(value, index) in values"
+                  :key="index"
+                  class="tw-text-secondary-500 c-col-span-2"
+                  :class="{
+                    'tw-col-span-2':
+                      value.field.type === 'text-area' || isMobileDevice,
+                  }"
                 >
-                  <TextWrapper
-                    :text-style="submitButtonTextStyle"
-                    :text="viewModel.buttonText"
-                    class="tw-text-center tw-text-base"
+                  <TextInput
+                    v-if="value.field.type !== 'text-area'"
+                    v-model="value.value"
+                    :placeholder="`${value.field.name}${
+                      value.field.required ? '*' : ''
+                    }`"
+                    :label="`${value.field.name}${value.field.required ? '*' : ''}`"
+                    :show-label-screen-reader-only="true"
+                    size="sm"
+                    :error="!!value.error"
+                    :type="getTextInputTypeByFieldType(value.field.type)"
+                    class="tw-w-full"
+                    @input="onValueChange(index)"
                   />
-                </button>
+                  <Textarea
+                    v-if="value.field.type === 'text-area'"
+                    v-model="value.value"
+                    :placeholder="`${value.field.name}${
+                      value.field.required ? '*' : ''
+                    }`"
+                    :label="`${value.field.name}${value.field.required ? '*' : ''}`"
+                    :show-label-screen-reader-only="true"
+                    size="sm"
+                    :error="!!value.error"
+                    :resize="false"
+                    class="tw-w-full"
+                    @input="onValueChange(index)"
+                  />
+                  <p v-if="!!value.error" class="form-error">
+                    {{ value.error }}
+                  </p>
+                </div>
+                <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
+                  <button
+                    v-if="isSubmitButtonVisible"
+                    class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                    :style="submitButtonStyle"
+                    :class="{ 'tw-w-full': isMobileDevice }"
+                  >
+                    <TextWrapper
+                      :text-style="submitButtonTextStyle"
+                      :text="viewModel.buttonText"
+                      class="tw-text-center tw-text-base"
+                    />
+                  </button>
+                </div>
               </div>
+              <div v-else class="tw-w-full tw-flex tw-justify-center">
+                <Loader />
+              </div>
+              <p
+                v-if="hasSubmitError"
+                class="tw-text-center tw-mt-2 form-error"
+              >
+                {{ submitError }}
+              </p>
+            </form>
+            <div v-else :style="successMessageColorStyle">
+              <TextWrapper
+                v-if="viewModel.successMessage"
+                :text="renderSuccessText"
+                element="p"
+                :class="'tw-my-0.5'"
+              />
             </div>
-            <div v-else class="tw-w-full tw-flex tw-justify-center">
-              <Loader />
-            </div>
-            <p v-if="hasSubmitError" class="tw-text-center tw-mt-2 form-error">
-              {{ submitError }}
-            </p>
-          </form>
-          <div v-else :style="successMessageColorStyle">
-            <TextWrapper
-              v-if="viewModel.successMessage"
-              :text="renderSuccessText"
-              element="p"
-              :class="'tw-my-0.5'"
-            />
           </div>
         </div>
       </div>
-      <div
-        v-else-if="isTextOnly"
-        class="tw-px-6 tw-py-8 tw-gap-2 contact-container"
-      >
+      <div v-else-if="isTextOnly" class="tw-px-6 tw-gap-2 contact-container">
         <span v-if="!hasSubmitted" class="tw-grid tw-grid-cols-2">
           <div
             v-if="!isSubmitting"
@@ -286,7 +289,7 @@
                   {{ value.error }}
                 </p>
               </div>
-              <div class="tw-flex tw-w-full tw-justify-start tw-col-span-2">
+              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
                 <button
                   v-if="isSubmitButtonVisible"
                   class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
@@ -350,10 +353,7 @@
             }"
           >
             <div
-              class="tw-flex tw-flex-col tw-gap-2 tw-px-8 tw-w-full tw-justify-center c-py-6"
-              :class="{
-                'tw-py-6': isMobileDevice,
-              }"
+              class="tw-flex tw-flex-col tw-gap-2 tw-px-8 tw-py-6 tw-w-full tw-justify-center"
             >
               <span v-if="!hasSubmitted">
                 <TextWrapper
@@ -417,7 +417,7 @@
                       </p>
                     </div>
                     <div
-                      class="tw-flex tw-w-full tw-justify-start tw-col-span-2"
+                      class="tw-flex tw-w-full tw-justify-center tw-col-span-2"
                     >
                       <button
                         v-if="isSubmitButtonVisible"
@@ -516,9 +516,6 @@ export default {
   .c-text-padding {
     @apply tw-px-0 tw-col-span-2;
   }
-  .c-py-6 {
-    @apply tw-py-6;
-  }
   .c-divided-container {
     @apply tw-flex-col;
   }

package/src/brand-page/components/image-gallery/ImageGallery.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { ImageGalleryViewModel } from '@brand-page/view-models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import type { ImageGalleryImageClickPayload } from './models';
@@ -34,6 +35,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     getContainerStyle(): BrandPageCssStyle {
       if (this.galleryType === 'carousel') {
         const maxWidth = this.containerClientWidth

package/src/brand-page/components/image-gallery/ImageGallery.vue

@@ -10,7 +10,7 @@
       'c-carousel-full-width':
         viewModel.isFullWidth && isPreview && galleryType === 'carousel',
     }"
-    :style="getContainerStyle"
+    :style="[getContainerStyle, contentPaddingStyle]"
   >
     <component
       :is="galleryType"

package/src/brand-page/components/mailing-list/MailingList.mixin.ts

@@ -2,7 +2,10 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { MailingListViewModel } from '@brand-page/view-models';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError } from '@brand-page/utils';
+import {
+  getEmailValidationError,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 import {
   contentSettingsTr,
@@ -61,6 +64,10 @@ export default defineComponent({
     }
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasNameError(): boolean {
       return !!this.nameError;
     },

package/src/brand-page/components/mailing-list/MailingList.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section :style="contentPaddingStyle">
     <div
       v-if="show"
       class="tw-p-4"