From 0cf49e6ef173eac1384364aac5fb4f3fa1b4b92c Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Tue, 2 Jun 2026 12:09:29 -0600
Subject: [PATCH] Move resolution date/remediation plan below failing metrics
 and fix date picker contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Resolution Date, Remediation Plan, and Apply To Metrics sections
now render immediately after Failing Metrics in the sidebar instead of
after Resolved Metrics and History — no more scrolling past unrelated
sections to reach the edit fields.

The date input also gains colorScheme: 'dark' so the native browser
calendar picker renders with light text on a dark background, fixing
the black-on-dark-blue readability issue.

Closes #21
Closes #22
---
 .../components/pages/ComplianceDetailPanel.js | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/pages/ComplianceDetailPanel.js b/frontend/src/components/pages/ComplianceDetailPanel.js
index 0a39caf..ef6105b 100644
--- a/frontend/src/components/pages/ComplianceDetailPanel.js
+++ b/frontend/src/components/pages/ComplianceDetailPanel.js
@@ -296,33 +296,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
                             </Section>
                         )}
 
-                        {/* Resolved metrics */}
-                        {resolvedMetrics.length > 0 && (
-                            <Section title="Resolved Metrics" muted>
-                                {resolvedMetrics.map(m => (
-                                    <MetricRow key={m.metric_id} metric={m} resolved />
-                                ))}
-                            </Section>
-                        )}
-
-                        {/* Upload history summary */}
-                        {activeMetrics.length > 0 && (
-                            <Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
-                                {activeMetrics.map(m => (
-                                    <div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
-                                        <MetricChip metricId={m.metric_id} category={m.category} />
-                                        <div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
-                                            <span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
-                                                {m.seen_count}× seen
-                                            </span>
-                                            {m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
-                                        </div>
-                                    </div>
-                                ))}
-                            </Section>
-                        )}
-
-                        {/* Metric Selector for Metadata Editing */}
+                        {/* Metric Selector for Metadata Editing — placed right after Failing Metrics per issue #21 */}
                         {activeMetrics.length > 0 && (
                             <Section title="Apply To Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
                                 {activeMetrics.length > 1 && (() => {
@@ -434,6 +408,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
                                     fontSize: '0.8rem',
                                     fontFamily: 'monospace',
                                     outline: 'none',
+                                    colorScheme: 'dark',
                                 }}
                                 onFocus={e => e.target.style.borderColor = `${TEAL}70`}
                             />
@@ -521,6 +496,32 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
                             />
                         </Section>
 
+                        {/* Resolved metrics */}
+                        {resolvedMetrics.length > 0 && (
+                            <Section title="Resolved Metrics" muted>
+                                {resolvedMetrics.map(m => (
+                                    <MetricRow key={m.metric_id} metric={m} resolved />
+                                ))}
+                            </Section>
+                        )}
+
+                        {/* Upload history summary */}
+                        {activeMetrics.length > 0 && (
+                            <Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
+                                {activeMetrics.map(m => (
+                                    <div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
+                                        <MetricChip metricId={m.metric_id} category={m.category} />
+                                        <div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
+                                            <span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
+                                                {m.seen_count}× seen
+                                            </span>
+                                            {m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
+                                        </div>
+                                    </div>
+                                ))}
+                            </Section>
+                        )}
+
                         {/* Change History */}
                         {detail.history && detail.history.length > 0 && (
                             <Section title="Change History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>