From 6ef81c8130ea2f0c305eb0d6763e0254e52585a4 Mon Sep 17 00:00:00 2001
From: Sam David <samd948@gmail.com>
Date: Tue, 8 Oct 2024 17:39:54 +0530
Subject: [PATCH] fix analysis details css issues

---
 .../file-compare/analysis-details/index.hbs   |  10 +-
 .../file-compare/analysis-details/index.scss  |  30 +-
 app/components/file-compare/index.scss        |   2 +-
 .../vulnerability-details/index.scss          |   2 +-
 .../findings/code-box/index.scss              |   1 -
 .../findings/code-box/index.ts                |   1 +
 .../findings/custom-vulnerabilities/index.hbs |  73 ++--
 .../custom-vulnerabilities/index.scss         | 113 +++--
 .../findings/index.hbs                        |   1 +
 .../findings/index.scss                       |  44 +-
 .../findings/vulnerable-api/index.hbs         | 152 +++----
 .../findings/vulnerable-api/index.ts          |  65 ++-
 .../vulnerability-analysis-details/index.hbs  | 390 +++++++++---------
 .../vulnerability-analysis-details/index.scss | 100 +++--
 app/styles/_component-variables.scss          |   5 +
 15 files changed, 560 insertions(+), 429 deletions(-)

diff --git a/app/components/file-compare/analysis-details/index.hbs b/app/components/file-compare/analysis-details/index.hbs
index 787c6d267..5da09cc0b 100644
--- a/app/components/file-compare/analysis-details/index.hbs
+++ b/app/components/file-compare/analysis-details/index.hbs
@@ -90,15 +90,17 @@
             {{finding.title}}
           </AkTypography>
 
-          <span class='scrollable-box'>
-            <pre class='pre-code'>{{finding.description}}</pre>
-          </span>
+          <div local-class='vulnerability-finding-container'>
+            <pre local-class='vulnerability-finding-description'>
+              {{finding.description}}
+            </pre>
+          </div>
         {{/each}}
       {{/if}}
     </AkStack>
 
     {{#if @analysis.attachments}}
-      <AkStack @width='full' @direction='column' class='px-3 pb-3'>
+      <AkStack @width='full' @direction='column' @spacing='1' class='px-3 pb-3'>
         <AkTypography @variant='h6' @gutterBottom={{true}}>
           {{t 'attachments'}}
         </AkTypography>
diff --git a/app/components/file-compare/analysis-details/index.scss b/app/components/file-compare/analysis-details/index.scss
index 2a8494263..97842db30 100644
--- a/app/components/file-compare/analysis-details/index.scss
+++ b/app/components/file-compare/analysis-details/index.scss
@@ -9,11 +9,11 @@
       --file-compare-analysis-details-marked-passed-bg-color
     );
 
-    :global(.scrollable-box),
-    :global(.scrollable-box) pre {
+    .vulnerability-finding-container {
       background-color: var(
         --file-compare-analysis-details-marked-passed-vuln-finding-bg-color
       );
+      border: 1px solid var(--file-compare-analysis-details-border-color);
     }
   }
 
@@ -22,10 +22,6 @@
     flex-direction: column;
     gap: 0.75em;
 
-    code {
-      @extend .scrollable-box;
-    }
-
     h1 {
       font-size: 1.75rem;
       margin: 0.4em 0 !important;
@@ -64,4 +60,26 @@
   .analysis-content-value {
     width: calc(100% - 185px);
   }
+
+  .vulnerability-finding-container {
+    width: 100%;
+    max-width: 600px;
+    max-height: 300px;
+    overflow: auto;
+    text-overflow: clip;
+    margin: 1em 0;
+    background-color: var(
+      --file-compare-analysis-details-findings-code-background-color
+    );
+    border-radius: var(--file-compare-analysis-details-findings-border-radius);
+
+    .vulnerability-finding-description {
+      background-color: unset;
+      color: var(--file-compare-analysis-details-findings-color-primary);
+      white-space: pre-line;
+      width: max-content;
+      line-height: normal;
+      padding: 0.75em;
+    }
+  }
 }
diff --git a/app/components/file-compare/index.scss b/app/components/file-compare/index.scss
index 6d79aaa4f..3ee08a2d7 100644
--- a/app/components/file-compare/index.scss
+++ b/app/components/file-compare/index.scss
@@ -1,7 +1,7 @@
 .file-compare-tabs {
   position: sticky;
   margin-top: 1.4286em;
-  top: calc(200px - 0.5em);
+  top: calc(198px - 0.5em);
   z-index: 10;
   background: var(--file-compare-tabs-background-color);
 }
diff --git a/app/components/file-compare/vulnerability-details/index.scss b/app/components/file-compare/vulnerability-details/index.scss
index eace63894..affd38b38 100644
--- a/app/components/file-compare/vulnerability-details/index.scss
+++ b/app/components/file-compare/vulnerability-details/index.scss
@@ -3,7 +3,7 @@
     --file-compare-vulnerability-details-header-wrapper-background-color
   );
   position: sticky;
-  top: calc(200px - 0.5em);
+  top: calc(198px - 0.5em);
   z-index: 1;
 
   .file-compare-vulnerability-details-header {
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.scss b/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.scss
index 2522fa808..c0fcf7dc0 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.scss
+++ b/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.scss
@@ -15,7 +15,6 @@
 
 .vulnerability-finding-container {
   width: 100%;
-  margin: 1em 0;
   background-color: var(
     --file-details-vulnerability-analysis-details-findings-code-box-code-background-color
   );
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.ts b/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.ts
index ba3c0cc61..f7e4e43e8 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.ts
+++ b/app/components/file-details/vulnerability-analysis-details/findings/code-box/index.ts
@@ -40,5 +40,6 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsCodeBoxCompo
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
     'FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox': typeof FileDetailsVulnerabilityAnalysisDetailsFindingsCodeBoxComponent;
+    'file-details/vulnerability-analysis-details/findings/code-box': typeof FileDetailsVulnerabilityAnalysisDetailsFindingsCodeBoxComponent;
   }
 }
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.hbs b/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.hbs
index 4e12407ff..a1f6666fe 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.hbs
+++ b/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.hbs
@@ -1,46 +1,45 @@
 <div
   local-class='analysis-section {{if
-  @analysis.isOverriddenAsPassed
-  "analysis-overridded-passed"
+    @analysis.isOverriddenAsPassed
+    "analysis-overridded-passed"
   }}'
   class='mb-2'
   data-test-analysisDetails-vulnerabilityContainer
 >
-    <AkStack local-class='analysis-content-title'>
-      <AkTypography
-        data-test-analysisDetails-vulnerabilityTitle
-        @variant='subtitle1'
-        @gutterBottom={{true}}
-      >
-        {{#if
-          (and @analysis.isRiskPassedBySystem (gt @analysis.findings.length 0))
-        }}
-          {{t 'evidences'}}
-        {{else}}
-          {{t 'vulnerability'}}
-        {{/if}}
-      </AkTypography>
-    </AkStack>
+  <AkStack local-class='analysis-content-title'>
+    <AkTypography
+      data-test-analysisDetails-vulnerabilityTitle
+      @variant='subtitle1'
+    >
+      {{#if
+        (and @analysis.isRiskPassedBySystem (gt @analysis.findings.length 0))
+      }}
+        {{t 'evidences'}}
+      {{else}}
+        {{t 'vulnerability'}}
+      {{/if}}
+    </AkTypography>
+  </AkStack>
 
-    <div class='p-3'>
-      {{#each @customVulnerableFindings as |finding idx|}}
-        {{#if finding.title}}
-          <AkTypography
-            data-test-analysisDetails-vulFindingTitle='{{idx}}'
-            local-class='analysis-content-value'
-          >
-            {{finding.title}}
-          </AkTypography>
-        {{/if}}
+  <div local-class='analysis-content-container' class='p-3'>
+    {{#each @customVulnerableFindings as |finding idx|}}
+      {{#if finding.title}}
+        <AkTypography
+          data-test-analysisDetails-vulFindingTitle='{{idx}}'
+          local-class='analysis-content-value'
+        >
+          {{finding.title}}
+        </AkTypography>
+      {{/if}}
 
-        <div local-class='vulnerability-finding-container'>
-          <pre
-            data-test-analysisDetails-vulFindingDescription='{{idx}}'
-            local-class='vulnerability-finding-description'
-          >
-            {{finding.description}}
-          </pre>
-        </div>
-      {{/each}}
-    </div>
+      <div local-class='vulnerability-finding-container'>
+        <pre
+          data-test-analysisDetails-vulFindingDescription='{{idx}}'
+          local-class='vulnerability-finding-description'
+        >
+          {{finding.description}}
+        </pre>
+      </div>
+    {{/each}}
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.scss b/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.scss
index 4f5161fd2..e61250772 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.scss
+++ b/app/components/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.scss
@@ -1,47 +1,84 @@
 .analysis-section {
-    width: 100%;
-    background-color: var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-background-main);
-    border: 1px solid var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-color);
-
-    &.analysis-overridded-passed {
-        background-color: var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-marked-passed-background-color);
-
-        .analysis-static-content pre code,
-        .vulnerability-finding-container {
-            background-color: var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-marked-passed-code-background-color);
-            border: 1px solid var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-color);
-        }
-    }
+  width: 100%;
+  background-color: var(
+    --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-background-main
+  );
+
+  &.analysis-overridded-passed {
+    background-color: var(
+      --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-marked-passed-background-color
+    );
 
     .analysis-content-title {
-        padding: 0.75em 1.5em;
-        border-bottom: 1px solid var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-color);
+      background-color: var(
+        --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-marked-passed-background-color
+      );
+    }
 
-        h6 {
-            margin-bottom: 0 !important;
-        }
+    .analysis-static-content pre code,
+    .vulnerability-finding-container {
+      background-color: var(
+        --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-marked-passed-code-background-color
+      );
+      border: 1px solid
+        var(
+          --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-color
+        );
     }
+  }
+
+  .analysis-content-title {
+    position: sticky;
+    top: calc(172px + 1.5em);
+    z-index: 1;
+    padding: 1em;
+    border: 1px solid
+      var(
+        --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-color
+      );
+    background-color: var(
+      --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-background-main
+    );
 
-    .analysis-content-value {
-        max-width: 460px;
+    h6 {
+      margin-bottom: 0 !important;
     }
+  }
 
-    .vulnerability-finding-container {
-        max-width: 600px;
-        max-height: 300px;
-        overflow: auto;
-        text-overflow: clip;
-        margin: 1em 0;
-        background-color: var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-code-background-color);
-        border-radius: var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-radius);
-
-        .vulnerability-finding-description {
-            background-color: unset;
-            color: var(--file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-color-primary);
-            white-space: pre-line;
-            width: max-content;
-            line-height: normal;
-            padding: 0.75em;
-        }
+  .analysis-content-container {
+    border-width: 0 1px 1px;
+    border-style: solid;
+    border-color: var(
+      --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-color
+    );
+  }
+
+  .analysis-content-value {
+    max-width: 460px;
+  }
+
+  .vulnerability-finding-container {
+    max-width: 600px;
+    max-height: 300px;
+    overflow: auto;
+    text-overflow: clip;
+    margin: 1em 0;
+    background-color: var(
+      --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-code-background-color
+    );
+    border-radius: var(
+      --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-border-radius
+    );
+
+    .vulnerability-finding-description {
+      background-color: unset;
+      color: var(
+        --file-details-vulnerability-analysis-details-findings-custom-vulnerabilities-color-primary
+      );
+      white-space: pre-line;
+      width: max-content;
+      line-height: normal;
+      padding: 0.75em;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/index.hbs b/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
index 74dd044c1..d71f14e03 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
+++ b/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
@@ -94,6 +94,7 @@
       </AkStack>
 
       <FileDetails::VulnerabilityAnalysisDetails::Findings::VulnerableApi
+        local-class='analysis-content-container'
         @currentVulnerability={{get pgc.currentPageResults 0}}
         @analysis={{this.analysis}}
       />
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/index.scss b/app/components/file-details/vulnerability-analysis-details/findings/index.scss
index a1a44ba09..d10a5cf16 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/index.scss
+++ b/app/components/file-details/vulnerability-analysis-details/findings/index.scss
@@ -3,40 +3,55 @@
   background-color: var(
     --file-details-vulnerability-analysis-details-background-main
   );
-  border: 1px solid var(--file-details-vulnerability-analysis-details-border-color);
 
   &.analysis-overridded-passed {
     background-color: var(
       --file-details-vulnerability-analysis-details-marked-passed-background-color
     );
 
+    .analysis-content-title {
+      background-color: var(
+        --file-details-vulnerability-analysis-details-marked-passed-background-color
+      );
+    }
+
     .vulnerability-finding-container {
       background-color: var(
         --file-details-vulnerability-analysis-details-marked-passed-code-background-color
       );
-  
+
       border: 1px solid
         var(--file-details-vulnerability-analysis-details-border-color);
     }
   }
 
-  &:not(:last-child) {
-    border-bottom: 1px solid
-      var(--file-details-vulnerability-analysis-details-divider-color);
-  }
-
   .analysis-content-value {
     max-width: 460px;
   }
 
   .analysis-content-title {
-    padding: 0.75em 1.5em;
-    border-bottom: 1px solid var(--file-details-vulnerability-analysis-details-border-color);
+    position: sticky;
+    top: calc(172px + 1.5em);
+    z-index: 1;
+    padding: 1em;
+    background-color: var(
+      --file-details-vulnerability-analysis-details-background-main
+    );
+    border: 1px solid
+      var(--file-details-vulnerability-analysis-details-border-color);
 
     h6 {
       margin-bottom: 0em !important;
     }
   }
+
+  .analysis-content-container {
+    border-width: 0 1px 1px;
+    border-style: solid;
+    border-color: var(
+      --file-details-vulnerability-analysis-details-border-color
+    );
+  }
 }
 
 .ak-pagination-button-prev-icon {
@@ -54,7 +69,9 @@
 .ak-pagination-prev-button,
 .ak-pagination-next-button {
   height: 30px;
-  background-color: var(--file-details-vulnerability-analysis-details-pagination-button-background-color);
+  background-color: var(
+    --file-details-vulnerability-analysis-details-pagination-button-background-color
+  );
   min-width: unset;
   padding-left: 0.143em;
   padding-right: 0.857em;
@@ -68,7 +85,10 @@
 
 .counter-container {
   padding: 0.3em 0.75em;
-  border: 1px solid var(--file-details-vulnerability-analysis-details-border-color);
-  background-color: var(--file-details-vulnerability-analysis-details-code-background-color);
+  border: 1px solid
+    var(--file-details-vulnerability-analysis-details-border-color);
+  background-color: var(
+    --file-details-vulnerability-analysis-details-code-background-color
+  );
   margin-right: 1em;
 }
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.hbs b/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.hbs
index ae7ca7d29..18d128db9 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.hbs
+++ b/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.hbs
@@ -1,108 +1,54 @@
-<div class='px-4 py-2'>
-  <AkStack @direction='column'>
-    {{#each this.currentVulnerabilityDetails as |item|}}
-      {{#if item.value}}
-        <AkStack @width='full' class='mb-1'>
-          <AkStack @width='4/12'>
-            <AkTypography
-              data-test-analysisDetails-vulFindingLabel='{{item.label}}'
-              @color='textSecondary'
-            >
-              {{item.label}}
-            </AkTypography>
-          </AkStack>
-
-          <AkStack @width='9/12' {{style word-break='break-all'}}>
-            <AkTypography
-              data-test-analysisDetails-vulFindingValue
-              @fontWeight='medium'
-            >
-              {{item.value}}
-            </AkTypography>
-          </AkStack>
-        </AkStack>
-      {{/if}}
-    {{/each}}
-
-    {{#unless this.isRequestBodyEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'requestBody'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{@currentVulnerability.request.body}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
-    {{/unless}}
-
-    {{#unless this.isRequestHeadersEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'requestHeaders'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{#each-in @currentVulnerability.request.headers as |key value|}}<span
-          >{{key}}: {{value}}</span>
-        {{/each-in}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
-    {{/unless}}
-
-    {{#unless this.isRequestParamsEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'requestParameters'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{#each-in @currentVulnerability.request.params as |key value|}}<span
-          >{{key}}: {{value}}</span>
-        {{/each-in}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
-    {{/unless}}
-
-    {{#unless this.isRequestCookiesEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'requestCookies'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{#each-in @currentVulnerability.response.cookies as |key value|}}<span
-          >{{key}}: {{value}}</span>
-        {{/each-in}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
-    {{/unless}}
-
-    {{#if @currentVulnerability.response.status_code}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'response'}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{this.responseStatusCode}}<br />{{this.responseMessage}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
+<div ...attributes class='py-2'>
+  {{#each this.currentVulnerabilityDetails as |item|}}
+    {{#if item.value}}
+      <AkStack @width='full' class='mb-1 px-4'>
+        <AkTypography
+          data-test-analysisDetails-vulFindingLabel='{{item.label}}'
+          class='w-4/12'
+          @color='textSecondary'
+        >
+          {{item.label}}
+        </AkTypography>
+
+        <AkTypography
+          data-test-analysisDetails-vulFindingValue
+          {{style word-break='break-all'}}
+          class='w-9/12'
+          @fontWeight='medium'
+        >
+          {{item.value}}
+        </AkTypography>
+      </AkStack>
     {{/if}}
+  {{/each}}
 
-    {{#unless this.isResponseHeadersEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'responseHeaders'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{#each-in @currentVulnerability.response.headers as |key value|}}<span
-          >{{key}}: {{value}}</span>
-        {{/each-in}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
-    {{/unless}}
-
-    {{#unless this.isResponseCookiesEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'responseCookies'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{#each-in @currentVulnerability.response.cookies as |key value|}}<span
-          >{{key}}: {{value}}</span>
-        {{/each-in}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
-    {{/unless}}
+  {{#each this.vulnerabilityDetails as |detail idx|}}
+    {{#unless detail.isEmpty}}
+      {{#if (eq idx 0)}}
+        <AkDivider class='mt-4 mb-2' @color='dark' />
+      {{/if}}
 
-    {{#unless this.isResponseBodyEmpty}}
-      <FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox
-        @title={{t 'responseBody'}}
-        @copyIcon={{true}}
-        @markedAsPassed={{@analysis.isOverriddenAsPassed}}
-      >{{@currentVulnerability.response.text}}
-      </FileDetails::VulnerabilityAnalysisDetails::Findings::CodeBox>
+      <div class='px-4 py-2'>
+        {{#let
+          (component
+            'file-details/vulnerability-analysis-details/findings/code-box'
+            title=detail.title
+            copyIcon=detail.copyIcon
+            markedAsPassed=@analysis.isOverriddenAsPassed
+          )
+          as |CodeBox|
+        }}
+          {{#if detail.isKeyValuePair}}
+            {{! Note: formating will add a new line for each key value pair }}
+            <CodeBox>{{#each-in detail.value as |key value|}}<span>{{key}}:
+                  {{value}}</span>
+              {{/each-in}}
+            </CodeBox>
+          {{else}}
+            <CodeBox>{{detail.value}}</CodeBox>
+          {{/if}}
+        {{/let}}
+      </div>
     {{/unless}}
-  </AkStack>
+  {{/each}}
 </div>
\ No newline at end of file
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.ts b/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.ts
index c1cc070b6..069768045 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.ts
+++ b/app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.ts
@@ -6,13 +6,11 @@ import type AnalysisModel from 'irene/models/analysis';
 import type { VulnerableApiFinding } from 'irene/utils/parse-vulnerable-api-finding';
 
 export interface FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiSignature {
+  Element: HTMLDivElement;
   Args: {
     analysis: AnalysisModel;
     currentVulnerability?: VulnerableApiFinding;
   };
-  Blocks: {
-    default: [];
-  };
 }
 
 export default class FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiComponent extends Component<FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiSignature> {
@@ -114,6 +112,67 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableAp
       return this.args.currentVulnerability?.url;
     }
   }
+
+  get vulnerabilityDetails() {
+    const request = this.args.currentVulnerability?.request;
+    const response = this.args.currentVulnerability?.response;
+
+    return [
+      {
+        title: this.intl.t('requestBody'),
+        value: request?.body,
+        isEmpty: this.isRequestBodyEmpty,
+        copyIcon: true,
+      },
+      {
+        title: this.intl.t('requestHeaders'),
+        value: request?.headers,
+        isEmpty: this.isRequestHeadersEmpty,
+        copyIcon: true,
+        isKeyValuePair: true,
+      },
+      {
+        title: this.intl.t('requestParameters'),
+        value: request?.params,
+        isEmpty: this.isRequestParamsEmpty,
+        copyIcon: true,
+        isKeyValuePair: true,
+      },
+      {
+        title: this.intl.t('requestCookies'),
+        value: request?.cookies,
+        isEmpty: this.isRequestCookiesEmpty,
+        copyIcon: true,
+        isKeyValuePair: true,
+      },
+      {
+        title: this.intl.t('response'),
+        value: `${this.responseStatusCode}\n${this.responseMessage}`,
+        isEmpty: !response?.status_code,
+        copyIcon: false,
+      },
+      {
+        title: this.intl.t('responseHeaders'),
+        value: response?.headers,
+        isEmpty: this.isResponseHeadersEmpty,
+        copyIcon: true,
+        isKeyValuePair: true,
+      },
+      {
+        title: this.intl.t('responseCookies'),
+        value: response?.cookies,
+        isEmpty: this.isResponseCookiesEmpty,
+        copyIcon: true,
+        isKeyValuePair: true,
+      },
+      {
+        title: this.intl.t('responseBody'),
+        value: response?.text,
+        isEmpty: this.isResponseBodyEmpty,
+        copyIcon: true,
+      },
+    ];
+  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/app/components/file-details/vulnerability-analysis-details/index.hbs b/app/components/file-details/vulnerability-analysis-details/index.hbs
index faa052104..5862fc2ec 100644
--- a/app/components/file-details/vulnerability-analysis-details/index.hbs
+++ b/app/components/file-details/vulnerability-analysis-details/index.hbs
@@ -4,80 +4,82 @@
     data-test-analysisDetails-header
     local-class='analysis-details-header'
   >
-    <div local-class='analysis-details-header-container'>
-      <AkBreadcrumbs::Container
-        data-test-vulnerabilityAnalysisDetails-breadcrumbContainer
-      >
-        {{#each this.breadcrumbItems as |item|}}
-          <AkBreadcrumbs::Item
-            @route={{item.route}}
-            @models={{item.models}}
-            @linkTitle={{item.linkTitle}}
-            data-test-vulnerabilityAnalysisDetails-breadcrumbItem='{{item.linkTitle}}'
-          />
-        {{/each}}
-      </AkBreadcrumbs::Container>
+    <div local-class='analysis-details-header-root'>
+      <div local-class='analysis-details-header-container'>
+        <AkBreadcrumbs::Container
+          data-test-vulnerabilityAnalysisDetails-breadcrumbContainer
+        >
+          {{#each this.breadcrumbItems as |item|}}
+            <AkBreadcrumbs::Item
+              @route={{item.route}}
+              @models={{item.models}}
+              @linkTitle={{item.linkTitle}}
+              data-test-vulnerabilityAnalysisDetails-breadcrumbItem='{{item.linkTitle}}'
+            />
+          {{/each}}
+        </AkBreadcrumbs::Container>
 
-      <AkStack class='mt-4' @alignItems='flex-end' @spacing='2'>
-        <AkStack @spacing='4.5' {{style flex='1'}}>
-          <AkStack
-            data-test-analysisDetails-headerSummaryGroup='{{t "title"}}'
-            @direction='column'
-            @spacing='1.5'
-          >
-            <AkTypography
-              data-test-analysisDetails-headerSummaryTitle
-              @tag='h6'
+        <AkStack class='mt-4' @alignItems='flex-end' @spacing='2'>
+          <AkStack @spacing='4.5' {{style flex='1'}}>
+            <AkStack
+              data-test-analysisDetails-headerSummaryGroup='{{t "title"}}'
+              @direction='column'
+              @spacing='1.5'
             >
-              {{t 'testCase'}}
-            </AkTypography>
+              <AkTypography
+                data-test-analysisDetails-headerSummaryTitle
+                @tag='h6'
+              >
+                {{t 'testCase'}}
+              </AkTypography>
 
-            <AkTypography
-              data-test-analysisDetails-headerSummaryValue
-              {{style maxWidth='400px'}}
-              @variant='h5'
-            >
-              {{@analysis.vulnerability.name}}
-            </AkTypography>
-          </AkStack>
+              <AkTypography
+                data-test-analysisDetails-headerSummaryValue
+                {{style maxWidth='400px'}}
+                @variant='h5'
+              >
+                {{@analysis.vulnerability.name}}
+              </AkTypography>
+            </AkStack>
 
-          <AkStack
-            data-test-analysisDetails-headerSummaryGroup='{{t "typeOfScan"}}'
-            @direction='column'
-            @spacing='1.5'
-          >
-            <AkTypography
-              data-test-analysisDetails-headerSummaryTitle
-              @tag='h6'
+            <AkStack
+              data-test-analysisDetails-headerSummaryGroup='{{t "typeOfScan"}}'
+              @direction='column'
+              @spacing='1.5'
             >
-              {{t 'typeOfScan'}}
-            </AkTypography>
+              <AkTypography
+                data-test-analysisDetails-headerSummaryTitle
+                @tag='h6'
+              >
+                {{t 'typeOfScan'}}
+              </AkTypography>
 
-            <FileDetails::TypeOfScan
-              @analysis={{@analysis}}
-              @chipSize='small'
-              @justifyContent='flex-start'
-              @tooltipPlacement='bottom'
-            />
+              <FileDetails::TypeOfScan
+                @analysis={{@analysis}}
+                @chipSize='small'
+                @justifyContent='flex-start'
+                @tooltipPlacement='bottom'
+              />
+            </AkStack>
           </AkStack>
-        </AkStack>
 
-        <AkStack @alignItems='stretch' @spacing='2'>
-          <AnalysisRisk::Tag
-            @computedRisk={{@analysis.computedRisk}}
-            @status={{@analysis.status}}
-            @isOverridden={{@analysis.isNonPassedRiskOverridden}}
-            @overriddenRisk={{@analysis.overriddenRisk}}
-            @originalRisk={{@analysis.risk}}
-          />
-
-          <div>
-            <FileDetails::VulnerabilityAnalysisDetails::EditAnalysisButton
-              @analysis={{@analysis}}
+          <AkStack @alignItems='stretch' @spacing='2'>
+            <AnalysisRisk::Tag
+              @computedRisk={{@analysis.computedRisk}}
+              @status={{@analysis.status}}
+              @isOverridden={{@analysis.isNonPassedRiskOverridden}}
+              @overriddenRisk={{@analysis.overriddenRisk}}
+              @originalRisk={{@analysis.risk}}
             />
-          </div>
+
+            <div>
+              <FileDetails::VulnerabilityAnalysisDetails::EditAnalysisButton
+                @analysis={{@analysis}}
+              />
+            </div>
+          </AkStack>
         </AkStack>
-      </AkStack>
+      </div>
     </div>
   </header>
 
@@ -90,16 +92,16 @@
       @direction='column'
       class='mb-2'
     >
-      <AkStack @width='full' local-class='analysis-content-description-title'>
+      <div local-class='analysis-content-title-container'>
         <AkTypography
           data-test-analysisDetails-descriptionLabel
           @variant='subtitle1'
         >
           {{t 'description'}}
         </AkTypography>
-      </AkStack>
+      </div>
 
-      <AkStack>
+      <AkStack local-class='analysis-content-container'>
         <AkTypography
           data-test-analysisDetails-descriptionValue
           local-class='analysis-content analysis-static-content'
@@ -118,15 +120,16 @@
     {{else if (or @analysis.isRisky @analysis.isOverriddenAsPassed)}}
       {{#if (and (eq @analysis.cvssVersion 3) @analysis.cvssVector)}}
         <div
-          local-class='analysis-section {{if
-            @analysis.isOverriddenAsPassed
-            "analysis-overridded-passed"
-          }}'
+          local-class='
+            analysis-section
+            analysis-section-container
+            {{if @analysis.isOverriddenAsPassed "analysis-overridded-passed"}}
+          '
         >
           <AkStack data-test-analysisDetails-regulatory='cvssv3' class='p-2'>
             <AkTypography
               @variant='subtitle1'
-              local-class='analysis-content-title'
+              local-class='analysis-content-label'
               title='{{t "cvssExpansion"}}'
               data-test-analysisDetails-regulatoryLabel
             >
@@ -149,30 +152,32 @@
           }}'
           data-test-analysisDetails-regulatory='cvssv3metrics'
         >
-          <AkTypography
-            @variant='subtitle1'
-            @gutterBottom={{true}}
-            local-class='analysis-content-description-title'
-            data-test-analysisDetails-regulatoryLabel
-          >
-            {{t 'cvssMetrics'}}
-          </AkTypography>
+          <div local-class='analysis-content-title-container'>
+            <AkTypography
+              @variant='subtitle1'
+              data-test-analysisDetails-regulatoryLabel
+            >
+              {{t 'cvssMetrics'}}
+            </AkTypography>
+          </div>
 
-          <FileDetails::VulnerabilityAnalysisDetails::RegulatoryContent
-            @contents={{@analysis.cvssMetricsHumanized}}
-          >
-            <:label as |metric|>
-              <AkTypography>
-                {{metric.key}}
-              </AkTypography>
-            </:label>
+          <div local-class='analysis-content-container'>
+            <FileDetails::VulnerabilityAnalysisDetails::RegulatoryContent
+              @contents={{@analysis.cvssMetricsHumanized}}
+            >
+              <:label as |metric|>
+                <AkTypography>
+                  {{metric.key}}
+                </AkTypography>
+              </:label>
 
-            <:value as |metric|>
-              <AkTypography>
-                {{metric.value}}
-              </AkTypography>
-            </:value>
-          </FileDetails::VulnerabilityAnalysisDetails::RegulatoryContent>
+              <:value as |metric|>
+                <AkTypography>
+                  {{metric.value}}
+                </AkTypography>
+              </:value>
+            </FileDetails::VulnerabilityAnalysisDetails::RegulatoryContent>
+          </div>
         </div>
       {{/if}}
 
@@ -187,23 +192,25 @@
             "analysis-overridded-passed"
           }}'
           @direction='column'
-          @spacing='1.5'
         >
-          <AkTypography
-            data-test-analysisDetails-compliantLabel
-            @variant='subtitle1'
-            local-class='analysis-content-description-title'
-          >
-            {{t 'compliantSolution'}}
-          </AkTypography>
+          <div local-class='analysis-content-title-container'>
+            <AkTypography
+              data-test-analysisDetails-compliantLabel
+              @variant='subtitle1'
+            >
+              {{t 'compliantSolution'}}
+            </AkTypography>
+          </div>
 
-          <AkTypography
-            data-test-analysisDetails-compliantValue
-            local-class='analysis-content analysis-static-content'
-            @tag='div'
-          >
-            {{this.compliantSolution}}
-          </AkTypography>
+          <div local-class='analysis-content-container'>
+            <AkTypography
+              data-test-analysisDetails-compliantValue
+              local-class='analysis-content analysis-static-content'
+              @tag='div'
+            >
+              {{this.compliantSolution}}
+            </AkTypography>
+          </div>
         </AkStack>
       {{/if}}
 
@@ -214,23 +221,25 @@
             "analysis-overridded-passed"
           }}'
           @direction='column'
-          @spacing='1.5'
         >
-          <AkTypography
-            data-test-analysisDetails-nonCompliantLabel
-            local-class='analysis-content-description-title'
-            @variant='subtitle1'
-          >
-            {{t 'nonCompliantCodeExample'}}
-          </AkTypography>
+          <div local-class='analysis-content-title-container'>
+            <AkTypography
+              data-test-analysisDetails-nonCompliantLabel
+              @variant='subtitle1'
+            >
+              {{t 'nonCompliantCodeExample'}}
+            </AkTypography>
+          </div>
 
-          <AkTypography
-            data-test-analysisDetails-nonCompliantValue
-            local-class='analysis-content analysis-static-content'
-            @tag='div'
-          >
-            {{this.nonCompliantCodeExample}}
-          </AkTypography>
+          <div local-class='analysis-content-container'>
+            <AkTypography
+              data-test-analysisDetails-nonCompliantValue
+              local-class='analysis-content analysis-static-content'
+              @tag='div'
+            >
+              {{this.nonCompliantCodeExample}}
+            </AkTypography>
+          </div>
         </AkStack>
       {{/if}}
 
@@ -241,98 +250,103 @@
             "analysis-overridded-passed"
           }}'
           @direction='column'
-          @spacing='2'
           @width='full'
         >
-          <AkTypography
-            data-test-analysisDetails-regulatoryContentTitle
-            class='px-3 pt-3'
-            @variant='subtitle1'
-            local-class='analysis-content-regulatory-title'
-          >
-            {{t 'regulatory'}}
-          </AkTypography>
+          <div local-class='analysis-content-title-container'>
+            <AkTypography
+              data-test-analysisDetails-regulatoryContentTitle
+              @variant='subtitle1'
+            >
+              {{t 'regulatory'}}
+            </AkTypography>
+          </div>
 
-          {{#each this.regulatoryContent as |rc|}}
-            {{#if rc.hasContent}}
-              <div
-                local-class='analysis-regulatory-content'
-                data-test-analysisDetails-regulatory='{{rc.key}}'
-              >
-                <AkTypography
-                  title='{{rc.title}}'
-                  data-test-analysisDetails-regulatoryLabel
-                  @variant='h6'
-                  @gutterBottom={{true}}
+          <div local-class='analysis-content-container'>
+            {{#each this.regulatoryContent as |rc|}}
+              {{#if rc.hasContent}}
+                <div
+                  class='mt-2'
+                  local-class='analysis-regulatory-content'
+                  data-test-analysisDetails-regulatory='{{rc.key}}'
                 >
-                  {{rc.heading}}
-                </AkTypography>
+                  <AkTypography
+                    title='{{rc.title}}'
+                    data-test-analysisDetails-regulatoryLabel
+                    @variant='h6'
+                    @gutterBottom={{true}}
+                  >
+                    {{rc.heading}}
+                  </AkTypography>
 
-                {{#if rc.component}}
-                  {{#let (component rc.component) as |Component|}}
-                    <Component @contents={{rc.contents}} />
-                  {{/let}}
-                {{else}}
-                  <FileDetails::VulnerabilityAnalysisDetails::RegulatoryContent
-                    @contents={{rc.contents}}
-                    @hasMoreDetails={{rc.hasMoreDetails}}
-                  />
-                {{/if}}
-              </div>
-            {{/if}}
-          {{/each}}
+                  {{#if rc.component}}
+                    {{#let (component rc.component) as |Component|}}
+                      <Component @contents={{rc.contents}} />
+                    {{/let}}
+                  {{else}}
+                    <FileDetails::VulnerabilityAnalysisDetails::RegulatoryContent
+                      @contents={{rc.contents}}
+                      @hasMoreDetails={{rc.hasMoreDetails}}
+                    />
+                  {{/if}}
+                </div>
+              {{/if}}
+            {{/each}}
+          </div>
         </AkStack>
       {{/if}}
 
       {{#if @analysis.vulnerability.businessImplication}}
         <AkStack
-          local-class='analysis-section business-implication-section {{if
+          local-class='analysis-section {{if
             @analysis.isOverriddenAsPassed
             "analysis-overridded-passed"
           }}'
           @direction='column'
-          @spacing='1'
         >
-          <AkTypography
-            data-test-analysisDetails-bussinessImpLabel
-            @variant='subtitle1'
-            local-class='analysis-content-description-title'
-          >
-            {{t 'businessImplication'}}
-          </AkTypography>
+          <div local-class='analysis-content-title-container'>
+            <AkTypography
+              data-test-analysisDetails-bussinessImpLabel
+              @variant='subtitle1'
+            >
+              {{t 'businessImplication'}}
+            </AkTypography>
+          </div>
 
-          <AkTypography
-            data-test-analysisDetails-bussinessImpValue
-            local-class='analysis-content analysis-static-content'
-            @tag='div'
-          >
-            {{this.businessImplication}}
-          </AkTypography>
+          <div local-class='analysis-content-container'>
+            <AkTypography
+              data-test-analysisDetails-bussinessImpValue
+              local-class='analysis-content analysis-static-content'
+              @tag='div'
+            >
+              {{this.businessImplication}}
+            </AkTypography>
+          </div>
         </AkStack>
       {{/if}}
     {{/if}}
 
     {{#if @analysis.attachments}}
       <AkStack
-        local-class='analysis-section business-implication-section {{if
+        local-class='analysis-section {{if
           @analysis.isOverriddenAsPassed
           "analysis-overridded-passed"
         }}'
         @direction='column'
-        @spacing='1'
       >
-        <AkTypography
-          data-test-analysisDetails-attachmentsTitle
-          @variant='subtitle1'
-          @gutterBottom={{true}}
-          local-class='analysis-content-description-title'
-        >
-          {{t 'attachments'}}
-        </AkTypography>
+        <div local-class='analysis-content-title-container'>
+          <AkTypography
+            data-test-analysisDetails-attachmentsTitle
+            @variant='subtitle1'
+          >
+            {{t 'attachments'}}
+          </AkTypography>
+        </div>
 
-        {{#each @analysis.attachments as |attachment|}}
-          <AttachmentDetail @attachment={{attachment}} />
-        {{/each}}
+        <div local-class='analysis-content-container'>
+          {{#each @analysis.attachments as |attachment|}}
+            <AttachmentDetail @attachment={{attachment}} />
+          {{/each}}
+        </div>
       </AkStack>
     {{/if}}
   </div>
diff --git a/app/components/file-details/vulnerability-analysis-details/index.scss b/app/components/file-details/vulnerability-analysis-details/index.scss
index c01977ca9..32f8f42f7 100644
--- a/app/components/file-details/vulnerability-analysis-details/index.scss
+++ b/app/components/file-details/vulnerability-analysis-details/index.scss
@@ -6,22 +6,28 @@
   );
 
   .analysis-details-header {
+    padding-bottom: 1.5em;
     background-color: var(
-      --file-details-vulnerability-analysis-details-background-main
-    );
-
-    box-shadow: var(
-      --file-details-vulnerability-analysis-details-header-box-shadow
+      --file-details-vulnerability-analysis-details-background-light
     );
-
-    padding: 1.75em 1.5em;
-    box-sizing: border-box;
     position: sticky;
     top: -0.5em;
-
     z-index: calc(
       var(--file-details-vulnerability-analysis-details-zIndex) - 1
     );
+
+    .analysis-details-header-root {
+      background-color: var(
+        --file-details-vulnerability-analysis-details-background-main
+      );
+
+      box-shadow: var(
+        --file-details-vulnerability-analysis-details-header-box-shadow
+      );
+
+      padding: 1.75em 1.5em;
+      box-sizing: border-box;
+    }
   }
 
   .analysis-details-header-container,
@@ -31,15 +37,15 @@
     margin: 0 auto;
   }
 
-  .analysis-details-body-container {
-    margin: 1.5em auto;
+  .analysis-details-header-container {
+    display: flex;
+    flex-direction: column;
+    height: 130px;
+    justify-content: space-between;
   }
 
-  .analysis-content-regulatory-title {
-    width: 100%;
-    padding: 1em;
-    border-bottom: 1px solid
-      var(--file-details-vulnerability-analysis-details-divider-color);
+  .analysis-details-body-container {
+    margin: 0 auto;
   }
 
   .analysis-section {
@@ -54,6 +60,12 @@
         --file-details-vulnerability-analysis-details-marked-passed-background-color
       );
 
+      .analysis-content-title-container {
+        background-color: var(
+          --file-details-vulnerability-analysis-details-marked-passed-background-color
+        );
+      }
+
       .analysis-static-content {
         pre code {
           background-color: var(
@@ -66,26 +78,8 @@
       }
     }
 
-    &.business-implication-section {
-      border: 1px solid var(--file-details-vulnerability-analysis-details-divider-color);
-    }
-
-    .analysis-content-description-title {
-      width: 100%;
-      padding: 1em;
-      border-bottom: 1px solid
-            var(--file-details-vulnerability-analysis-details-divider-color);
-    }
-
-    &:not(:last-child) {
-      border: 1px solid
-        var(--file-details-vulnerability-analysis-details-divider-color);
-    }
-
     &.analysis-regulatory-section {
       padding: 0em;
-      border: 1px solid
-            var(--file-details-vulnerability-analysis-details-divider-color);
 
       .analysis-regulatory-content {
         width: 100%;
@@ -99,6 +93,33 @@
     }
   }
 
+  .analysis-section-container {
+    border: 1px solid
+      var(--file-details-vulnerability-analysis-details-divider-color);
+  }
+
+  .analysis-content-title-container {
+    width: 100%;
+    padding: 1em;
+    position: sticky;
+    top: calc(172px + 1.5em);
+    z-index: 1;
+    background-color: var(
+      --file-details-vulnerability-analysis-details-background-main
+    );
+    border: 1px solid
+      var(--file-details-vulnerability-analysis-details-divider-color);
+  }
+
+  .analysis-content-container {
+    width: 100%;
+    border-width: 0 1px 1px;
+    border-style: solid;
+    border-color: var(
+      --file-details-vulnerability-analysis-details-divider-color
+    );
+  }
+
   .analysis-static-content {
     display: flex;
     flex-direction: column;
@@ -127,14 +148,23 @@
       }
     }
 
+    code {
+      color: var(--file-details-vulnerability-analysis-details-color-primary);
+      font-size: 0.857rem;
+      font-weight: 400;
+      padding: 1px 2px 2px;
+    }
+
     pre {
       background-color: unset;
 
       code {
+        display: block;
         width: 600px;
         max-height: 400px;
         overflow: auto;
         margin: 0.5em 0;
+        padding: 1em;
         font-size: 1rem;
         background-color: var(
           --file-details-vulnerability-analysis-details-code-background-color
@@ -149,7 +179,7 @@
     }
   }
 
-  .analysis-content-title {
+  .analysis-content-label {
     min-width: 250px;
     max-width: 250px;
   }
diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
index 7241d361b..d44b99adb 100644
--- a/app/styles/_component-variables.scss
+++ b/app/styles/_component-variables.scss
@@ -1144,6 +1144,11 @@ body {
   --file-compare-analysis-details-marked-passed-vuln-finding-bg-color: var(
     --neutral-grey-50
   );
+  --file-compare-analysis-details-findings-code-background-color: var(
+    --neutral-grey-100
+  );
+  --file-compare-analysis-details-findings-border-radius: var(--border-radius);
+  --file-compare-analysis-details-findings-color-primary: var(--primary-main);
 
   // variables for file-compare/compare-list
   --file-compare-compare-list-wrapper-background-color: var(--background-main);