diff --git a/scss/email-recovery.scss b/scss/email-recovery.scss
index 24427a184c2648d663c8e4d89c84ae481859366c..2d212d4d824ce8a99da8f691485b82d35667395a 100644
--- a/scss/email-recovery.scss
+++ b/scss/email-recovery.scss
@@ -47,6 +47,9 @@
     height: calc(100% - env(safe-area-inset-bottom) - var(--recovery-banner-height) - var(--body-container-margin)) !important;
 }
 
+.recovery-content-layout-without-margin {
+	height: calc(100% - env(safe-area-inset-bottom) - var(--recovery-banner-height) - var(--body-container-margin)) !important;
+}
 
 
 @media only screen and (max-width: 768px) {
diff --git a/src/email-recovery.js b/src/email-recovery.js
index 37df6a4dcea79a619e3292ead45583912ce0d560..8d14de4b1db0d5a9890bdeba81863b446afd6ff8 100644
--- a/src/email-recovery.js
+++ b/src/email-recovery.js
@@ -47,8 +47,43 @@ document.addEventListener('DOMContentLoaded', function() {
 						attributes: true
 					})
 				}
+
 			}
 		}
+
+		/*
+		 * Spreed call seems to reset class list, this restores 'recovery-content-layout-without-margin' class name if another script removes it from classlist
+		 * We don't want to add extra margin-top
+		 * spreed app has 2 base url: /apps/spreed & /call, so we need to consider both
+		*/
+		if (window.location.href.includes('/apps/spreed') || window.location.href.includes('/call/')) {
+			const intervalId = setInterval(() => {
+				// we need to first try to add on init stage. This is needed so, when user opens a conversation, the chatbox can be visible
+				const contentVue = document.querySelector('#content-vue')
+				if (contentVue) {
+					contentVue.style.setProperty('--recovery-banner-height', topHeight)
+					contentVue.classList.add('recovery-content-layout-without-margin')
+				}
+
+				// when a call initiated, the recovery-banner class is removed. We need to re-add it
+				const observer = new MutationObserver(function(mutations) {
+					mutations.forEach(function(mutation) {
+						if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+							if (contentVue && banner && !banner.classList.contains('recovery-banner-hidden') && !contentVue.classList.contains('recovery-content-layout-without-margin')) {
+								contentVue.style.setProperty('--recovery-banner-height', topHeight)
+								contentVue.classList.add('recovery-content-layout-without-margin')
+							}
+						}
+					})
+				})
+				observer.observe(contentVue, {
+					attributes: true
+				})
+
+				clearInterval(intervalId)
+			}, 100)
+		}
+
 		// added special case for bookmarks and passwords
 		if (window.location.href.includes('apps/bookmarks/') || window.location.href.includes('apps/passwords/')) {
 			const intervalId = setInterval(() => {