From 9cb74f6f2f791bce2f68b32fca454199e4180321 Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Sat, 8 Nov 2025 13:41:29 +0000
Subject: [PATCH] refactor: replace unique IDs with nth-child selectors in
 HelpModal

Remove unnecessary unique IDs from help modal topic elements and their corresponding CSS selectors, replacing them with more maintainable nth-child pseudo-selectors.
---
 Modals/HelpModalSvelte.svelte | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/Modals/HelpModalSvelte.svelte b/Modals/HelpModalSvelte.svelte
index 0e7ea2f..7c23470 100644
--- a/Modals/HelpModalSvelte.svelte
+++ b/Modals/HelpModalSvelte.svelte
@@ -72,50 +72,46 @@
 	<div class="help-modal-body">
 		<div class="help-modal-topics">
 			<div
-				id="help-modal-topic-frame-1"
 				class="help-modal-topic-frame"
 				class:hidden={selectedTopic !== 1}
 				on:click={() => selectTopic(1)}
 				on:keydown={(e) => e.key === 'Enter' && selectTopic(1)}
 				role="button"
 				tabindex="0">
-				<div id="help-modal-topic-item-1" class="help-modal-topic-item">
+				<div class="help-modal-topic-item">
 					{topics[1].title}
 				</div>
 			</div>
 			<div
-				id="help-modal-topic-frame-2"
 				class="help-modal-topic-frame"
 				class:hidden={selectedTopic !== 2}
 				on:click={() => selectTopic(2)}
 				on:keydown={(e) => e.key === 'Enter' && selectTopic(2)}
 				role="button"
 				tabindex="0">
-				<div id="help-modal-topic-item-2" class="help-modal-topic-item">
+				<div class="help-modal-topic-item">
 					{topics[2].title}
 				</div>
 			</div>
 			<div
-				id="help-modal-topic-frame-3"
 				class="help-modal-topic-frame"
 				class:hidden={selectedTopic !== 3}
 				on:click={() => selectTopic(3)}
 				on:keydown={(e) => e.key === 'Enter' && selectTopic(3)}
 				role="button"
 				tabindex="0">
-				<div id="help-modal-topic-item-3" class="help-modal-topic-item">
+				<div class="help-modal-topic-item">
 					{topics[3].title}
 				</div>
 			</div>
 			<div
-				id="help-modal-topic-frame-4"
 				class="help-modal-topic-frame"
 				class:hidden={selectedTopic !== 4}
 				on:click={() => selectTopic(4)}
 				on:keydown={(e) => e.key === 'Enter' && selectTopic(4)}
 				role="button"
 				tabindex="0">
-				<div id="help-modal-topic-item-4" class="help-modal-topic-item">
+				<div class="help-modal-topic-item">
 					{topics[4].title}
 				</div>
 			</div>
@@ -208,19 +204,19 @@
 		background-color: transparent;
 	}
 
-	#help-modal-topic-frame-1 {
+	.help-modal-topic-frame:nth-child(1) {
 		grid-row: 1;
 	}
 
-	#help-modal-topic-frame-2 {
+	.help-modal-topic-frame:nth-child(2) {
 		grid-row: 3;
 	}
 
-	#help-modal-topic-frame-3 {
+	.help-modal-topic-frame:nth-child(3) {
 		grid-row: 5;
 	}
 
-	#help-modal-topic-frame-4 {
+	.help-modal-topic-frame:nth-child(4) {
 		grid-row: 7;
 	}
 
@@ -243,19 +239,19 @@
 		color: var(--text-normal);
 	}
 
-	#help-modal-topic-item-1 {
+	.help-modal-topic-item:nth-child(1) {
 		grid-row: 1;
 	}
 
-	#help-modal-topic-item-2 {
+	.help-modal-topic-item:nth-child(2) {
 		grid-row: 3;
 	}
 
-	#help-modal-topic-item-3 {
+	.help-modal-topic-item:nth-child(3) {
 		grid-row: 5;
 	}
 
-	#help-modal-topic-item-4 {
+	.help-modal-topic-item:nth-child(4) {
 		grid-row: 7;
 	}