fix: Settings panel overflows screen on certain sizes #90

src/seqta/ui/SettingsResizer.ts

@@ -0,0 +1,26 @@
+import { debounce } from "../utils/debounce";
+
+/**
+ * Automatically resizes the popup to fit the screen, checks on resize but is debounced to prevent intense utilisation.
+ */
+export class SettingsResizer {
+  constructor() {
+    this.adjustPopupHeight();
+    window.addEventListener('resize', debounce(this.adjustPopupHeight, 250) as EventListener);
+    document.addEventListener('DOMContentLoaded', this.adjustPopupHeight);
+  }
+
+  private adjustPopupHeight() {
+    const iframePopup = document.getElementById('ExtensionPopup');
+    if (!iframePopup) return;
+
+    const viewportHeight = window.innerHeight;
+    const idealHeight = viewportHeight - 80 - 15; // -80px for the top of the popup
+
+    if (idealHeight > 600) {
+      iframePopup.style.height = '600px';
+    } else {
+      iframePopup.style.height = `${idealHeight}px`;
+    }
+  }
+}

src/seqta/utils/debounce.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates a debounced function that delays invoking the provided function until after `wait` milliseconds have elapsed
+ * since the last time it was invoked. The debounced function will only be invoked once during the `wait` period.
+ *
+ * @param func - The function to debounce.
+ * @param wait - The number of milliseconds to delay.
+ * @param immediate - If `true`, the function will be invoked immediately on the leading edge instead of the trailing edge.
+ *                    If not provided, it is disabled by default.
+ * @returns A debounced function.
+ */
+export function debounce(func: Function, wait: number, immediate?: boolean): Function {
+  let timeout: number | undefined;
+  return function(this: any) {
+    const context = this;
+    const args = arguments;
+    const later = function() {
+      timeout = undefined;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}