From 699776111bc43d723958ed0bd9790c36f4a56cb3 Mon Sep 17 00:00:00 2001
From: leSamo <soleksak@redhat.com>
Date: Fri, 20 Dec 2024 21:57:01 +0100
Subject: [PATCH] fix(CVSS popover): Fix misalignment of CVSS popover

---
 .../CVEDetailsPageSidebar.test.js.snap        | 19 ++---
 .../CvssVector/CvssVector.js                  | 70 +++++++++++--------
 .../__snapshots__/CveDetailsPage.test.js.snap | 19 ++---
 3 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/src/Components/PresentationalComponents/CVEDetailsPageSidebar/__snapshots__/CVEDetailsPageSidebar.test.js.snap b/src/Components/PresentationalComponents/CVEDetailsPageSidebar/__snapshots__/CVEDetailsPageSidebar.test.js.snap
index d360b460e..ed1e4fc81 100644
--- a/src/Components/PresentationalComponents/CVEDetailsPageSidebar/__snapshots__/CVEDetailsPageSidebar.test.js.snap
+++ b/src/Components/PresentationalComponents/CVEDetailsPageSidebar/__snapshots__/CVEDetailsPageSidebar.test.js.snap
@@ -147,14 +147,14 @@ exports[`CVEDetailsPageSidebar component should render correctly 1`] = `
       <div
         class="pf-v5-c-content"
       >
-        <div
-          style="display: contents;"
+        <span
+          class="vuln-label "
+          style="font-size: medium; display: block;"
         >
-          <span
-            class="vuln-label pf-v5-u-mb-xs pointer"
-            style="font-size: medium; display: block;"
+          CVSS 3.0  base score
+          <div
+            style="display: contents;"
           >
-            CVSS 3.0  base score
             <span
               class="pf-v5-c-icon"
             >
@@ -163,11 +163,12 @@ exports[`CVEDetailsPageSidebar component should render correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg pf-v5-u-ml-xs"
+                  class="pf-v5-svg pf-v5-u-ml-xs pointer"
                   color="var(--pf-v5-global--secondary-color--100)"
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  style="vertical-align: -2px;"
                   viewBox="0 0 512 512"
                   width="1em"
                 >
@@ -177,8 +178,8 @@ exports[`CVEDetailsPageSidebar component should render correctly 1`] = `
                 </svg>
               </span>
             </span>
-          </span>
-        </div>
+          </div>
+        </span>
         <span
           class="pf-v5-u-mr-md"
         >
diff --git a/src/Components/PresentationalComponents/CvssVector/CvssVector.js b/src/Components/PresentationalComponents/CvssVector/CvssVector.js
index 0c347fcb5..8941cbd09 100644
--- a/src/Components/PresentationalComponents/CvssVector/CvssVector.js
+++ b/src/Components/PresentationalComponents/CvssVector/CvssVector.js
@@ -43,42 +43,50 @@ const CvssVector = ({ cvss2_metrics: CVSS2Vector, cvss3_metrics: CVSS3Vector, sc
         <CVEPageContext.Consumer>
             {context => (
                 <TextContent>
-                    <Popover
-                        id="popover-cvss"
-                        position="bottom"
-                        maxWidth="100%"
-                        enableFlip
-                        headerContent={`${cvssVer} ${intl.formatMessage(messages.cvssVectorPopoverTitle)}`}
-                        bodyContent={
-                            <WithLoader isLoading={context.isLoading} colSize={2} rowSize={8} variant={LoaderType.compactTable}>
-                                {cvssVector ?
-                                    (<Table
-                                        aria-label="Metric breakdown"
-                                        variant={TableVariant.compact}
-                                        gridBreakPoint=""
-                                        cells={
-                                            [intl.formatMessage(messages.cvssVectorMetric),
-                                                intl.formatMessage(messages.cvssVectorValue)]
-                                        }
-                                        rows={Object.entries(parsedVector)}
-                                    >
-                                        <TableHeader />
-                                        <TableBody />
-                                    </Table>
-                                    ) : (notAvailable)}
-                            </WithLoader>
-                        }
-                    >
-                        <Label isLarge className="pf-v5-u-mb-xs pointer">
-                            {cvssVer} {intl.formatMessage(messages.cvssVectorVectorString)}
+                    <Label isLarge>
+                        {cvssVer} {intl.formatMessage(messages.cvssVectorVectorString)}
+                        <Popover
+                            id="popover-cvss"
+                            position="bottom"
+                            maxWidth="100%"
+                            enableFlip
+                            headerContent={`${cvssVer} ${intl.formatMessage(messages.cvssVectorPopoverTitle)}`}
+                            bodyContent={
+                                <WithLoader
+                                    isLoading={context.isLoading}
+                                    colSize={2}
+                                    rowSize={8}
+                                    variant={LoaderType.compactTable}
+                                >
+                                    {cvssVector ?
+                                        (<Table
+                                            aria-label="Metric breakdown"
+                                            variant={TableVariant.compact}
+                                            gridBreakPoint=""
+                                            cells={
+                                                [
+                                                    intl.formatMessage(messages.cvssVectorMetric),
+                                                    intl.formatMessage(messages.cvssVectorValue)
+                                                ]
+                                            }
+                                            rows={Object.entries(parsedVector)}
+                                        >
+                                            <TableHeader />
+                                            <TableBody />
+                                        </Table>
+                                        ) : (notAvailable)}
+                                </WithLoader>
+                            }
+                        >
                             <Icon>
                                 <OutlinedQuestionCircleIcon
                                     color="var(--pf-v5-global--secondary-color--100)"
-                                    className="pf-v5-u-ml-xs"
+                                    className="pf-v5-u-ml-xs pointer"
+                                    style={{ verticalAlign: -2 }}
                                 />
                             </Icon>
-                        </Label>
-                    </Popover>
+                        </Popover>
+                    </Label>
 
                     <WithLoader isLoading={context.isLoading} style={{ width: '320px' }}>
                         <span className="pf-v5-u-mr-md">{score}</span>
diff --git a/src/Components/SmartComponents/CVEDetailsPage/__snapshots__/CveDetailsPage.test.js.snap b/src/Components/SmartComponents/CVEDetailsPage/__snapshots__/CveDetailsPage.test.js.snap
index 7fdad56d6..2806b7714 100644
--- a/src/Components/SmartComponents/CVEDetailsPage/__snapshots__/CveDetailsPage.test.js.snap
+++ b/src/Components/SmartComponents/CVEDetailsPage/__snapshots__/CveDetailsPage.test.js.snap
@@ -342,14 +342,14 @@ exports[`CVE details: Should render match snapshot 1`] = `
             <div
               class="pf-v5-c-content"
             >
-              <div
-                style="display: contents;"
+              <span
+                class="vuln-label "
+                style="font-size: medium; display: block;"
               >
-                <span
-                  class="vuln-label pf-v5-u-mb-xs pointer"
-                  style="font-size: medium; display: block;"
+                CVSS 3.0  base score
+                <div
+                  style="display: contents;"
                 >
-                  CVSS 3.0  base score
                   <span
                     class="pf-v5-c-icon"
                   >
@@ -358,11 +358,12 @@ exports[`CVE details: Should render match snapshot 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="pf-v5-svg pf-v5-u-ml-xs"
+                        class="pf-v5-svg pf-v5-u-ml-xs pointer"
                         color="var(--pf-v5-global--secondary-color--100)"
                         fill="currentColor"
                         height="1em"
                         role="img"
+                        style="vertical-align: -2px;"
                         viewBox="0 0 512 512"
                         width="1em"
                       >
@@ -372,8 +373,8 @@ exports[`CVE details: Should render match snapshot 1`] = `
                       </svg>
                     </span>
                   </span>
-                </span>
-              </div>
+                </div>
+              </span>
               <span
                 class="pf-v5-u-mr-md"
               >