From fdd73ebfdb5d93749880112b1644d5f2df3fdada Mon Sep 17 00:00:00 2001
From: abrichr <richard.abrich@mldsai.com>
Date: Sun, 26 Jul 2026 08:45:28 -0400
Subject: [PATCH 1/2] Polish shared evidence player overlay

---
 components/EvidenceMediaPlayer.js         | 15 +++++++++------
 components/EvidenceMediaPlayer.module.css | 20 +++++++++++---------
 cypress/e2e/reference-demo.cy.js          |  2 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/EvidenceMediaPlayer.js b/components/EvidenceMediaPlayer.js
index 46cc64d..a6d85db 100644
--- a/components/EvidenceMediaPlayer.js
+++ b/components/EvidenceMediaPlayer.js
@@ -306,7 +306,6 @@ export default function EvidenceMediaPlayer({
                         className={styles.capsule}
                         aria-label={`OpenAdapt ${accessibleModeLabel.toLowerCase()} in ${application}`}
                         data-overlay-kind="canonical-runtime-state"
-                        data-interactive={overlayEvidenceHref ? 'true' : undefined}
                     >
                         <span className={styles.header}>
                             <span className={styles.brand}>
@@ -351,11 +350,6 @@ export default function EvidenceMediaPlayer({
                                 {presentation.explanation}
                             </span>
                         )}
-                        {overlayEvidenceHref && (
-                            <a className={styles.evidenceLink} href={overlayEvidenceHref}>
-                                View execution evidence
-                            </a>
-                        )}
                     </div>
                 )}
             </div>
@@ -397,6 +391,15 @@ export default function EvidenceMediaPlayer({
                 ) : (
                     <span className={styles.time}>Looping evidence clip</span>
                 )}
+                {overlayEvidenceHref && (
+                    <a
+                        className={styles.evidenceLink}
+                        href={overlayEvidenceHref}
+                        aria-label={`View evidence for ${application} ${accessibleModeLabel.toLowerCase()}`}
+                    >
+                        Evidence
+                    </a>
+                )}
                 <button
                     type="button"
                     aria-label="Enter full screen"
diff --git a/components/EvidenceMediaPlayer.module.css b/components/EvidenceMediaPlayer.module.css
index 8444cfc..5d90acf 100644
--- a/components/EvidenceMediaPlayer.module.css
+++ b/components/EvidenceMediaPlayer.module.css
@@ -51,10 +51,6 @@
     backdrop-filter: blur(10px);
 }
 
-.capsule[data-interactive='true'] {
-    pointer-events: auto;
-}
-
 .stage[data-overlay-placement='bottom-left'] .capsule {
     left: 10px;
 }
@@ -226,16 +222,18 @@
 }
 
 .evidenceLink {
-    justify-self: start;
-    min-height: 44px;
-    padding: 8px 12px;
+    display: inline-flex;
+    min-height: 36px;
+    flex: 0 0 auto;
+    align-items: center;
+    padding: 0 10px;
     border: 1px solid rgba(255, 255, 255, 0.22);
     border-radius: 7px;
     background: rgba(255, 255, 255, 0.08);
     color: #f4f7f2;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
-    line-height: 28px;
+    line-height: 1.2;
     text-decoration: none;
 }
 
@@ -349,6 +347,10 @@
         order: 3;
         min-width: 100%;
     }
+
+    .evidenceLink {
+        min-height: 44px;
+    }
 }
 
 @media (prefers-reduced-transparency: reduce) {
diff --git a/cypress/e2e/reference-demo.cy.js b/cypress/e2e/reference-demo.cy.js
index d0e0774..03a07e8 100644
--- a/cypress/e2e/reference-demo.cy.js
+++ b/cypress/e2e/reference-demo.cy.js
@@ -103,7 +103,7 @@ describe('shared real-application demo', () => {
             cy.get('@player')
                 .should('have.attr', 'data-decoded-frame-index', '1')
                 .then(($player) => $player.find('video')[0].pause())
-                .should('contain.text', 'View execution evidence')
+                .should('contain.text', 'Evidence')
                 .and('contain.text', 'Application network traffic observed')
                 .find('[data-decoded-frame-index="1"]')
                 .should('be.visible')

From 2be28b0ca114772d6a9d7f8d47bb0b74058dd67d Mon Sep 17 00:00:00 2001
From: abrichr <richard.abrich@mldsai.com>
Date: Sun, 26 Jul 2026 08:54:18 -0400
Subject: [PATCH 2/2] Align mobile playback focus order

---
 components/EvidenceMediaPlayer.module.css | 29 ++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/components/EvidenceMediaPlayer.module.css b/components/EvidenceMediaPlayer.module.css
index 5d90acf..6408cae 100644
--- a/components/EvidenceMediaPlayer.module.css
+++ b/components/EvidenceMediaPlayer.module.css
@@ -340,17 +340,40 @@
     }
 
     .controls {
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: 44px minmax(0, 1fr) auto 44px;
+        grid-template-rows: auto auto;
+        gap: 4px 8px;
+    }
+
+    .controls > button:first-child {
+        grid-column: 1;
+        grid-row: 1;
     }
 
     .controls input {
-        order: 3;
-        min-width: 100%;
+        grid-column: 2 / 5;
+        grid-row: 1;
+        width: 100%;
+        min-width: 0;
+    }
+
+    .time {
+        grid-column: 1 / 3;
+        grid-row: 2;
+        margin-left: 0;
     }
 
     .evidenceLink {
+        grid-column: 3;
+        grid-row: 2;
         min-height: 44px;
     }
+
+    .controls > button:last-child {
+        grid-column: 4;
+        grid-row: 2;
+    }
 }
 
 @media (prefers-reduced-transparency: reduce) {