From f1a342396dc71975f531f1966a6265495bcddc2a Mon Sep 17 00:00:00 2001 From: skjnldsv Date: Tue, 21 Jul 2026 09:48:35 +0200 Subject: [PATCH] feat(NcDialog): expose modal container padding as CSS variables The padding of the modal container around the dialog was hardcoded (4px 0 block, 12px 0 inline). Expose it as --dialog-padding-block and --dialog-padding-inline (defaulting to the current values) so consumers can adjust the dialog padding without overriding internal, scoped selectors. Assisted-by: ClaudeCode:claude-fable-5 --- src/components/NcDialog/NcDialog.vue | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue index 959d90ad4e..8b3b24cb67 100644 --- a/src/components/NcDialog/NcDialog.vue +++ b/src/components/NcDialog/NcDialog.vue @@ -566,10 +566,18 @@ const modalProps = computed(() => ({ overflow: hidden; &__modal { + // Padding of the modal container around the dialog. Exposed as custom + // properties so consumers can adjust it without overriding internals. + // Defaults: 4px block-start to align with the close button (0 block-end so + // overflowing content looks nice on scroll), 12px inline-start to align + // with the modal padding (0 inline-end to keep the actions' outline margin). + --dialog-padding-block: 4px 0; + --dialog-padding-inline: 12px 0; + :deep(.modal-wrapper .modal-container) { display: flex !important; - padding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice - padding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline + padding-block: var(--dialog-padding-block); + padding-inline: var(--dialog-padding-inline); } :deep(.modal-wrapper .modal-container__content) { display: flex;