fix: improve layout of stability popovers

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/masonry/MasonryTile.tsx

@@ -200,7 +200,7 @@ function renderValue({
               className="pdl-masonry-tile-stability-popover"
               headerContent={detailHeader}
               bodyContent={
-                <Stack hasGutter>
+                <Stack>
                   <Progress
                     size="sm"
                     variant={
@@ -211,35 +211,45 @@ function renderValue({
                           : "success"
                     }
                     value={100 * v}
-                    title="A/B Match"
+                    title={
+                      v === 1
+                        ? "Perfect Match!"
+                        : "A/B Comparison of Differences"
+                    }
                   />
-                  <Split hasGutter>
+                  <Split>
                     <Panel
                       isScrollable
                       className="pdl-masonry-tile-stability-popover-ab-panel"
+                      data-perfect-match={v === 1 || undefined}
                     >
-                      <PanelHeader>
-                        <Title headingLevel="h4">A</Title>
-                      </PanelHeader>
-                      <PanelMain maxHeight="400px">
+                      {v < 1 && (
+                        <PanelHeader>
+                          <Title headingLevel="h4">A</Title>
+                        </PanelHeader>
+                      )}
+                      <PanelMain maxHeight="300px">
                         <PanelMainBody>
                           <Result result={detailBody?.[i]} term="" />
                         </PanelMainBody>
                       </PanelMain>
                     </Panel>
-                    <Panel
-                      isScrollable
-                      className="pdl-masonry-tile-stability-popover-ab-panel"
-                    >
-                      <PanelHeader>
-                        <Title headingLevel="h4">B</Title>
-                      </PanelHeader>
-                      <PanelMain maxHeight="400px">
-                        <PanelMainBody>
-                          <Result result={detailBody?.[j]} term="" />
-                        </PanelMainBody>
-                      </PanelMain>
-                    </Panel>
+                    {v < 1 && (
+                      <Panel
+                        isScrollable
+                        variant="secondary"
+                        className="pdl-masonry-tile-stability-popover-ab-panel"
+                      >
+                        <PanelHeader>
+                          <Title headingLevel="h4">B</Title>
+                        </PanelHeader>
+                        <PanelMain maxHeight="300px">
+                          <PanelMainBody>
+                            <Result result={detailBody?.[j]} term="" />
+                          </PanelMainBody>
+                        </PanelMain>
+                      </Panel>
+                    )}
                   </Split>
                 </Stack>
               }

pdl-live-react/src/view/masonry/Stability.css

@@ -48,5 +48,32 @@
 }
 
 .pdl-masonry-tile-stability-popover-ab-panel {
-  max-width: 300px;
+  .pf-v6-c-panel__main-body {
+    padding-bottom: 0;
+  }
+  &:not([data-perfect-match]) {
+    max-width: 300px;
+  }
+
+  &:first-child {
+    .pf-v6-c-panel__main-body,
+    .pf-v6-c-panel__header {
+      padding-left: 0;
+    }
+  }
+  &:last-child {
+    .pf-v6-c-panel__main-body,
+    .pf-v6-c-panel__header {
+      padding-right: 0;
+    }
+  }
+  &[data-perfect-match] {
+    .pf-v6-c-panel__main-body {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+.pdl-masonry-tile-stability-popover-ab-panel-mainbody {
+  margin-left: 0;
 }