fix(results): stabilize sortable violation rows

Author: RubenHalman

force-app/main/default/lwc/lightningFlowScanner/lightningFlowScanner.css

@@ -1,11 +1,11 @@
 /* --------------------------
  Page Layout
 --------------------------- */
+/* Full width on all tabs — no page cap */
 .page, :host {
     display: flex;
     flex-direction: column;
-    max-width: 1600px;
-    margin: 0 auto;
+    margin: 0;
     padding: 0;
     background-color: transparent;
 }
@@ -49,42 +49,11 @@
     flex-direction: column;
 }
 
-.all-mode-container lightning-card {
+/* White body joined directly to the blue toolbar above it (no border between) */
+.all-mode-container .table-card {
     background-color: #ffffff;
-    border-radius: 0.5rem;
+    border-radius: 0 0 0.5rem 0.5rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    --sds-c-card-header-spacing-block-end: 0;
-    --sds-c-card-body-spacing-block-start: 0;
-    --sds-c-card-header-spacing-block-start: 0;
-}
-
-.all-mode-container .slds-card__header {
-    padding: 0 !important;
-    background-color: #003087;
-}
-
-.all-mode-container .slds-card__header .slds-media {
-    width: 100% !important;
-}
-
-.all-mode-container .slds-card__header .slds-media__body {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-.all-mode-container .slds-card__header .slds-card__header-title {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-.all-mode-container .slds-card__header .slds-truncate {
-    overflow: visible !important;
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-.all-mode-container .slds-p-around_xx-small {
-    padding: 0.25rem 0.5rem !important;
 }
 
 /* --------------------------
@@ -99,6 +68,7 @@
     color: #ffffff;
     margin: 0 !important;
     justify-content: space-between;
+    border-radius: 0.5rem 0.5rem 0 0;
 }
 
 .toolbar-icon { 
@@ -256,25 +226,11 @@ lightning-datatable {
     gap: 0.5rem;
 }
 
-.all-mode-container lightning-card .slds-card__header {
-    padding: 0 !important;
-    background-color: #003087;
-    width: 100%;
-}
-
 .all-mode-container .toolbar-row.slds-grid {
     margin: 0 !important;
     width: 100% !important;
 }
 
-.slds-tabs_default__content {
-    background-color: #003087;
-}
-
-.all-mode-container lightning-card {
-    background-color: #003087;
-}
-
 /* --------------------------
  TABLE HEADER SORT INDICATORS
 --------------------------- */

force-app/main/default/lwc/lightningFlowScanner/lightningFlowScanner.html

@@ -102,7 +102,7 @@ <h2 class="slds-text-heading_small slds-truncate">All Results</h2>
                         </div>
                     </div>
                     <!-- Table Card -->
-                    <lightning-card>
+                    <div class="table-card">
                         <template if:true={hasFlattenedViolations}>
                             <div class="custom-datatable">
                                 <table class="slds-table slds-table_cell-buffer full-width-table">
@@ -154,7 +154,7 @@ <h2 class="slds-text-heading_small slds-truncate">All Results</h2>
                                 </p>
                             </template>
                         </template>
-                    </lightning-card>
+                    </div>
                 </template>
             </div>
         </template>

force-app/main/default/lwc/lightningFlowScanner/lightningFlowScanner.js

@@ -78,7 +78,7 @@ export default class LightningFlowScanner extends LightningElement {
 
     // ----- SORTING -----
     handleSort(event) {
-        const field = event.target.dataset.field;
+        const field = event.currentTarget.dataset.field;
         if (!field) return;
 
         if (this.sortField === field) {
@@ -88,20 +88,21 @@ export default class LightningFlowScanner extends LightningElement {
             this.sortDirection = "asc";
         }
 
-        // Update indicators
-        this.sortIndicators = {};
-        this.sortIndicators[field] = this.sortDirection === "asc" ? "▲" : "▼";
+        this.sortIndicators = { [field]: this.sortDirection === "asc" ? "▲" : "▼" };
     }
 
     // ----- FLATTENED VIOLATIONS -----
     get flattenedViolations() {
         let violations = [];
 
-        const processRuleDetails = (rule, ruleIndex, flowName) => {
+        // flowKey keeps row keys unique across flows in all-mode — detail.id values
+        // (e.g. "res-0-0") repeat per flow, and duplicate for:each keys break LWC's
+        // list diffing when a sort reorders the rows.
+        const processRuleDetails = (rule, ruleIndex, flowName, flowKey) => {
             if (!rule.details) return;
             rule.details.forEach((detail, detailIndex) => {
                 violations.push({
-                    id: detail.id || `flow-${flowName}-rule-${ruleIndex}-detail-${detailIndex}`,
+                    id: `flow-${flowKey}-rule-${ruleIndex}-detail-${detailIndex}`,
                     flowName: flowName,
                     ruleName: rule.ruleName,
                     severity: rule.severity,
@@ -121,7 +122,7 @@ export default class LightningFlowScanner extends LightningElement {
             this.allScanResults.forEach((item, itemIndex) => {
                 const flowName = item.flowName;
                 item.scanResult?.ruleResults?.forEach((rule, ruleIndex) =>
-                    processRuleDetails(rule, ruleIndex, flowName)
+                    processRuleDetails(rule, ruleIndex, flowName, itemIndex)
                 );
             });
         } else {
@@ -132,7 +133,7 @@ export default class LightningFlowScanner extends LightningElement {
                         this.selectedFlowRecord.developerName)) ||
                 "";
             this.scanResult?.ruleResults?.forEach((rule, ruleIndex) =>
-                processRuleDetails(rule, ruleIndex, flowName)
+                processRuleDetails(rule, ruleIndex, flowName, "single")
             );
         }