From 28ad7b3381bbbbac14c452312863f088496902c1 Mon Sep 17 00:00:00 2001
From: Alastair Grant <85125580+aldo-g@users.noreply.github.com>
Date: Wed, 26 Mar 2025 16:59:11 +0100
Subject: [PATCH] spinner overlay fixed

---
 src/ui/QuestionView.ts | 14 ++++++++++++--
 src/ui/SettingsTab.ts  |  6 ++----
 styles.css             |  5 +----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/ui/QuestionView.ts b/src/ui/QuestionView.ts
index e8297ed..cbabdd1 100644
--- a/src/ui/QuestionView.ts
+++ b/src/ui/QuestionView.ts
@@ -47,9 +47,17 @@ export default class QuestionDocumentView extends ItemView {
 
 
   private showSpinner(): HTMLDivElement {
-    const container = this.containerEl.querySelector(".test-document-container") || this.containerEl;
+    const container = this.containerEl;
+    
     const spinnerOverlay = container.createDiv({ cls: "spinner-overlay" });
     
+    const contentHeight = Math.max(
+      container.scrollHeight,
+      container.querySelector(".test-document-container")?.scrollHeight || 0
+    );
+    
+    spinnerOverlay.style.height = `${contentHeight}px`;
+    
     const spinnerFixed = spinnerOverlay.createDiv({ cls: "spinner-fixed-center" });
     
     spinnerFixed.createDiv({ cls: "spinner" });
@@ -62,7 +70,9 @@ export default class QuestionDocumentView extends ItemView {
   }
   
   private hideSpinner(spinnerOverlay: HTMLDivElement) {
-    spinnerOverlay.remove();
+    if (spinnerOverlay) {
+      spinnerOverlay.detach();
+    }
   }
 
   private adjustTextareaHeight(textarea: HTMLTextAreaElement): void {
diff --git a/src/ui/SettingsTab.ts b/src/ui/SettingsTab.ts
index 23377a9..57eaac5 100644
--- a/src/ui/SettingsTab.ts
+++ b/src/ui/SettingsTab.ts
@@ -13,9 +13,7 @@ export default class SettingsTab extends PluginSettingTab {
 	display(): void {
 		const { containerEl } = this;
 		containerEl.empty();
-		
-		containerEl.createEl("h2", { text: "RAG Test Plugin Settings" });
-		
+				
 		new Setting(containerEl)
 			.setName("LLM provider")
 			.setDesc("Select which LLM provider you want to use for generating and marking tests")
@@ -192,7 +190,7 @@ export default class SettingsTab extends PluginSettingTab {
 		}
 		
 		// About section
-		containerEl.createEl("h3", { text: "About API Keys" });
+		new Setting(containerEl).setName("About API keys").setHeading();
 		const apiInfoDiv = containerEl.createDiv({ cls: "api-key-info" });
 		apiInfoDiv.createEl("p", { 
 			text: "Your API keys are stored locally in your vault and are only used to communicate with the selected LLM provider."
diff --git a/styles.css b/styles.css
index 49c895f..616c277 100644
--- a/styles.css
+++ b/styles.css
@@ -573,6 +573,7 @@
   z-index: 1000;
   background-color: rgba(0, 0, 0, 0.7);
   pointer-events: all;
+  min-height: 100%; /* Ensure it's at least as tall as the container */
 }
 
 .spinner-fixed-center {
@@ -649,10 +650,6 @@
   transition: height 0.1s ease-out, border-color 0.2s ease;
 }
 
-.test-container-relative {
-  position: relative;
-}
-
 textarea.answer-input {
   min-height: 60px;
   max-height: 300px;