fix: correct visibility toggling of details section [HEAD-1172] (#418)

* fix(suggestion-details): correct visibility toggling of details section

- Resolved an issue where the suggestion details section in the webview was not properly toggling visibility.
- Replaced the previous inline styling method with a CSS class.

* fix: cache elements references to minimize repetitive DOM queries

* chore: add CHANGELOG Snyk Code webview fixes

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Snyk Security - Code and Open Source Dependencies Changelog
 
+## [2.2.1]
+
+### Fixed
+
+- Snyk Code: Optimized performance by caching DOM element references in `suggestion-details`. This minimizes repetitive DOM queries, enhancing the responsiveness and efficiency of the webview.
+- Snyk Code: Corrected the visibility toggling behavior in the `#suggestion-details` section. Replaced inline styling with CSS class-based approach.
+
 ## [2.2.0]
 
 ### Added

src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts

@@ -291,7 +291,7 @@ export class CodeSuggestionWebviewProvider
           </div>
         </section>
 
-        <section class="delimiter-top">
+        <section class="delimiter-top suggestion-details-content">
           <div id="suggestion-details" class="suggestion-details"></div>
         </section>
         <section class="actions row no-padding-top">

src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts

@@ -58,6 +58,12 @@ declare const acquireVsCodeApi: any;
 
   const vscode = acquireVsCodeApi();
 
+  const elements = {
+    readMoreBtn: document.querySelector('.read-more-btn') as HTMLElement,
+    suggestionDetails: document.querySelector('#suggestion-details') as HTMLElement,
+    suggestionDetailsContent: document.querySelector('.suggestion-details-content') as HTMLElement,
+  };
+
   let isReadMoreBtnEventBound = false;
 
   function navigateToUrl(url: string) {
@@ -321,17 +327,18 @@ declare const acquireVsCodeApi: any;
   }
 
   function showSuggestionDetails(suggestion: Suggestion) {
-    const suggestionDetails = document.querySelector('#suggestion-details') as HTMLElement;
-    const readMoreBtn = document.querySelector('.read-more-btn') as HTMLElement;
+    const { suggestionDetails, readMoreBtn, suggestionDetailsContent } = elements;
 
     if (!suggestion || !suggestion.text || !suggestionDetails || !readMoreBtn) {
+      readMoreBtn.classList.add('hidden');
+      suggestionDetailsContent.classList.add('hidden');
       return;
     }
 
     suggestionDetails.innerHTML = suggestion.text;
     suggestionDetails.classList.add('collapsed');
-
-    readMoreBtn.style.display = 'block';
+    readMoreBtn.classList.remove('hidden');
+    suggestionDetailsContent.classList.remove('hidden');
 
     if (!isReadMoreBtnEventBound) {
       readMoreBtn.addEventListener('click', () => {