From c4abba2b20bbd39b6944bd287c6b46157b466d96 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Fri, 7 Aug 2026 12:06:46 +0200
Subject: [PATCH] fix: add box-sizing: border-box to all NcModal and NcPopover
 containers

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/ConfirmationModal.vue           | 4 ++++
 src/components/DelegationModal.vue             | 4 ++++
 src/components/EventModal.vue                  | 1 +
 src/components/MailboxPicker.vue               | 1 +
 src/components/MailboxThread.vue               | 4 ++++
 src/components/MenuEnvelope.vue                | 1 +
 src/components/Message.vue                     | 4 ++++
 src/components/NewMessageModal.vue             | 1 +
 src/components/RecipientBubble.vue             | 4 ++++
 src/components/SourceModal.vue                 | 4 ++++
 src/components/TagModal.vue                    | 1 +
 src/components/TaskModal.vue                   | 1 +
 src/components/mailFilter/CreateModal.vue      | 4 ++++
 src/components/mailFilter/Operator.vue         | 4 ++++
 src/components/mailFilter/UpdateModal.vue      | 4 ++++
 src/components/quickActions/Settings.vue       | 3 +++
 src/components/smime/SmimeCertificateModal.vue | 4 ++++
 17 files changed, 49 insertions(+)

diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index 1f99729999..6ac4f94ba8 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -73,6 +73,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
+
 .confirm-modal {
 	padding: 20px;
 
diff --git a/src/components/DelegationModal.vue b/src/components/DelegationModal.vue
index 638875c3e0..b7ad6dc4d7 100644
--- a/src/components/DelegationModal.vue
+++ b/src/components/DelegationModal.vue
@@ -294,6 +294,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
+
 .delegation-modal {
 	padding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 3);
 	h2 {
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index 6b439e7018..675a6e7f32 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -342,6 +342,7 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
 	width: calc(100vw - 120px) !important;
 	height: calc(100vh - 120px) !important;
 	max-width: 590px !important;
diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue
index 40833d9ca2..856e3e5218 100644
--- a/src/components/MailboxPicker.vue
+++ b/src/components/MailboxPicker.vue
@@ -204,6 +204,7 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.modal-container) {
+	box-sizing: border-box;
 	width: calc(100vw - 120px) !important;
 	height: calc(100vh - 120px) !important;
 	max-width: 600px !important;
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 76464d1c93..78c8301dc9 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -612,6 +612,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.v-popper__inner) {
+	box-sizing: border-box;
+}
+
 .section-title {
 	:deep(h2) {
 		margin: 0 !important;
diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
index d5fd7d9860..2fc81ef842 100644
--- a/src/components/MenuEnvelope.vue
+++ b/src/components/MenuEnvelope.vue
@@ -749,6 +749,7 @@ export default {
 <style lang="scss" scoped>
 	.source-modal {
 		:deep(.modal-container) {
+			box-sizing: border-box;
 			height: 800px;
 		}
 
diff --git a/src/components/Message.vue b/src/components/Message.vue
index b3479b199d..cc87138fbd 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -200,6 +200,10 @@ export default {
 <style lang="scss" scoped>
 @use '../../css/variables.scss';
 
+:deep(.v-popper__inner) {
+	box-sizing: border-box;
+}
+
 .v-popover > .trigger > .action-item {
 	border-radius: 22px;
 	background-color: var(--color-background-darker);
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 225e74ff57..2c7450f837 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -657,6 +657,7 @@ export default {
 }
 
 :deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
 	overflow-y: auto !important;
 	overflow-x: auto !important;
 	// from original Modal max-height
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index b4fee32c93..910434dd4f 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -282,6 +282,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.v-popper__inner) {
+	box-sizing: border-box;
+}
+
 .user-bubble__title {
 	max-width: 30vw;
 }
diff --git a/src/components/SourceModal.vue b/src/components/SourceModal.vue
index cdb51d59cf..64a996e58d 100644
--- a/src/components/SourceModal.vue
+++ b/src/components/SourceModal.vue
@@ -36,6 +36,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
+
 .message-source {
 	padding: 0 calc(var(--default-grid-baseline) * 4);
 
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index 7d163375a0..978a2155f0 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -204,6 +204,7 @@ export default {
 }
 
 :deep(.modal-container) {
+	box-sizing: border-box;
 	width: auto !important;
 }
 
diff --git a/src/components/TaskModal.vue b/src/components/TaskModal.vue
index 10dc880aa4..7435d9c94e 100644
--- a/src/components/TaskModal.vue
+++ b/src/components/TaskModal.vue
@@ -248,6 +248,7 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
 	width: calc(100vw - 120px) !important;
 	height: calc(100vh - 120px) !important;
 	max-width: 490px !important;
diff --git a/src/components/mailFilter/CreateModal.vue b/src/components/mailFilter/CreateModal.vue
index 6db81eff86..f06b20f6b7 100644
--- a/src/components/mailFilter/CreateModal.vue
+++ b/src/components/mailFilter/CreateModal.vue
@@ -140,6 +140,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
+
 .modal__content {
 	margin: 20px;
 }
diff --git a/src/components/mailFilter/Operator.vue b/src/components/mailFilter/Operator.vue
index 2d5899d4c3..e3940c6046 100644
--- a/src/components/mailFilter/Operator.vue
+++ b/src/components/mailFilter/Operator.vue
@@ -74,6 +74,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.v-popper__inner) {
+	box-sizing: border-box;
+}
+
 .operator {
 	display: flex;
 	margin-bottom: calc(var(--default-grid-baseline) * 2);
diff --git a/src/components/mailFilter/UpdateModal.vue b/src/components/mailFilter/UpdateModal.vue
index 5d5c033288..d67a236382 100644
--- a/src/components/mailFilter/UpdateModal.vue
+++ b/src/components/mailFilter/UpdateModal.vue
@@ -185,6 +185,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
+
 .modal__content {
 	margin: 20px;
 }
diff --git a/src/components/quickActions/Settings.vue b/src/components/quickActions/Settings.vue
index 29a6283365..7e559029ce 100644
--- a/src/components/quickActions/Settings.vue
+++ b/src/components/quickActions/Settings.vue
@@ -369,6 +369,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
 
 .modal-content{
 	padding: 0 30px 30px 30px;
diff --git a/src/components/smime/SmimeCertificateModal.vue b/src/components/smime/SmimeCertificateModal.vue
index 9e3386df87..179fa3ea9d 100644
--- a/src/components/smime/SmimeCertificateModal.vue
+++ b/src/components/smime/SmimeCertificateModal.vue
@@ -260,6 +260,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.modal-wrapper .modal-container) {
+	box-sizing: border-box;
+}
+
 .empty-content{
 	height: 100%;
 	display: flex;