diff --git a/plugins/calendar-resources/src/components/IntegrationConnect.svelte b/plugins/calendar-resources/src/components/IntegrationConnect.svelte
index e457b56ef4..3d5b617661 100644
--- a/plugins/calendar-resources/src/components/IntegrationConnect.svelte
+++ b/plugins/calendar-resources/src/components/IntegrationConnect.svelte
@@ -80,9 +80,9 @@
     </div>
 
     <img class="image" src={getMetadata(calendar.image.Permissions)} alt="" />
-    <div class="footer">
-      <Button label={calendar.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
-    </div>
+  </div>
+  <div class="footer">
+    <Button label={calendar.string.Connect} kind={'primary'} disabled={connecting} on:click={sendRequest} />
   </div>
 </div>
 
@@ -91,9 +91,12 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 40rem;
-    min-width: 40rem;
-    max-width: 40rem;
+    width: min(40rem, calc(100vw - 2rem));
+    min-width: 0;
+    max-width: min(40rem, calc(100vw - 2rem));
+    max-height: calc(100vh - 2rem);
+    max-height: calc(100dvh - 2rem);
+    overflow: hidden;
     background-color: var(--popup-bg-hover);
     border-radius: 0.75rem;
     box-shadow: var(--popup-shadow);
@@ -114,10 +117,14 @@
     }
 
     .content {
-      flex-shrink: 0;
-      flex-grow: 1;
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
       color: var(--theme-content-color);
-      margin: 0 1.75rem 0.5rem;
+      margin: 0 1.75rem;
+      padding-bottom: 0.5rem;
     }
 
     .image {
@@ -127,11 +134,14 @@
     }
 
     .footer {
+      flex-shrink: 0;
       display: flex;
       flex-direction: row-reverse;
       justify-content: space-between;
       align-items: center;
-      padding: 1rem 0;
+      padding: 1rem 1.75rem 1.25rem;
+      margin-top: auto;
+      background-color: var(--popup-bg-hover);
     }
   }
 </style>