diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.scss b/modules/ui/src/app/pages/general-settings/general-settings.component.scss
index 4fc8a7308..0619d2cc8 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.scss
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.scss
@@ -28,7 +28,7 @@
 .setting-drawer-content {
   overflow-y: scroll;
   height: max-content;
-  max-height: calc(100vh - 260px);
+  max-height: calc(100vh - #{variables.$settings-top});
   padding: 10px;
 
   .setting-drawer-content-form-empty {
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index 5cf6d3414..8c0604ea0 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -375,6 +375,68 @@ body #main {
       width: calc(100% - #{variables.$profiles-drawer-width});
     }
   }
+
+  &:has(app-settings) {
+    .app-callout-container app-callout:last-of-type .callout-container {
+      margin-bottom: 0;
+    }
+  }
+
+  &:has(.app-callout-container > app-callout) {
+    .setting-drawer-content {
+      max-height: calc(100vh - #{variables.$settings-top-with-callout});
+    }
+  }
+
+  &:has(.app-callout-container > app-callout + app-callout) {
+    .setting-drawer-content {
+      max-height: calc(100vh - #{variables.$settings-top-with-two-callouts});
+    }
+  }
+}
+
+@media only screen and (min-width: 880px) and (max-width: 1100px) {
+  body #main {
+    &:has(.app-callout-container > app-callout#outdated_devices_callout) {
+      .setting-drawer-content {
+        max-height: calc(
+          100vh - #{variables.$settings-top-with-callout} - 20px
+        );
+      }
+    }
+
+    &:has(
+        .app-callout-container
+          > app-callout
+          + app-callout#outdated_devices_callout
+      ) {
+      .setting-drawer-content {
+        max-height: calc(
+          100vh - #{variables.$settings-top-with-two-callouts} - 20px
+        );
+      }
+    }
+  }
+}
+
+@media (max-width: 880px) {
+  body #main {
+    &:has(.app-callout-container > app-callout) {
+      .setting-drawer-content {
+        max-height: calc(
+          100vh - #{variables.$settings-top-with-callout} - 20px
+        );
+      }
+    }
+
+    &:has(.app-callout-container > app-callout + app-callout) {
+      .setting-drawer-content {
+        max-height: calc(
+          100vh - #{variables.$settings-top-with-two-callouts} - 40px
+        );
+      }
+    }
+  }
 }
 
 .text-nowrap {
diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss
index a9415a167..b2a44b99c 100644
--- a/modules/ui/src/theming/variables.scss
+++ b/modules/ui/src/theming/variables.scss
@@ -21,6 +21,9 @@ $corner-large: 16px;
 $corner-extra-large: 28px;
 $corner-medium: 12px;
 $reports-table-header-size: 32px;
+$settings-top: 260px;
+$settings-top-with-callout: 340px;
+$settings-top-with-two-callouts: 410px;
 
 // nav variables
 $nav-button-height: 32px;