From f3cc5dadf186baddce31930abd571d36d561a43c Mon Sep 17 00:00:00 2001
From: Jack Harper <jack.harper@stfc.ac.uk>
Date: Sat, 28 Feb 2026 20:57:45 +0000
Subject: [PATCH 1/2] use details+summary for topbar to avoid copy-paste issue
 on mobile

---
 app/components/TopBar.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 2466624..a45f476 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -140,13 +140,11 @@ const TopBar = function TopBar({
           </table>
         </div>
 
-        <label id={"runInfoLabel"} className="p-2 w-full">
-          <input className="peer/showLabel absolute scale-0" type="checkbox" />
-          <span className="block max-h-14 overflow-hidden rounded-lg bg-gray-600 hover:bg-gray-800 text-white px-4 py-0 mb-2 transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer items-center">
-            <h3 className="flex h-14 cursor-pointer font-bold text-center items-center justify-center">
+          <details className="w-full rounded-lg  bg-gray-600 text-white px-0 py-0 mb-2 items-center mt-2">
+            <summary className="flex h-14 font-bold text-center items-center cursor-pointer justify-center rounded-lg w-full bg-gray-800 hover:bg-black">
               Show/hide all run information
-            </h3>
-            <div className="grid md:grid-cols-5 gap-2">
+            </summary>
+            <div className="grid md:grid-cols-5 gap-2 px-4 pt-4">
               {Array.from(runInfoPVs.values()).map((runInfoPV) => (
                 <div
                   className="mb-2 shadow-xs rounded-md"
@@ -157,8 +155,7 @@ const TopBar = function TopBar({
                 </div>
               ))}
             </div>
-          </span>
-        </label>
+          </details>
       </div>
     </div>
   );

From 715738dca2c238d9a041195c70f8e0efbd1561b1 Mon Sep 17 00:00:00 2001
From: Jack Harper <jack.harper@stfc.ac.uk>
Date: Sat, 28 Feb 2026 21:00:16 +0000
Subject: [PATCH 2/2] update snapshot

---
 app/components/TopBar.tsx                     |  32 +-
 .../__snapshots__/TopBar.test.ts.snap         | 779 +++++++++---------
 2 files changed, 401 insertions(+), 410 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index a45f476..4575236 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -140,22 +140,22 @@ const TopBar = function TopBar({
           </table>
         </div>
 
-          <details className="w-full rounded-lg  bg-gray-600 text-white px-0 py-0 mb-2 items-center mt-2">
-            <summary className="flex h-14 font-bold text-center items-center cursor-pointer justify-center rounded-lg w-full bg-gray-800 hover:bg-black">
-              Show/hide all run information
-            </summary>
-            <div className="grid md:grid-cols-5 gap-2 px-4 pt-4">
-              {Array.from(runInfoPVs.values()).map((runInfoPV) => (
-                <div
-                  className="mb-2 shadow-xs rounded-md"
-                  key={runInfoPV.human_readable_name}
-                >
-                  <p className="font-bold">{runInfoPV.human_readable_name}:</p>{" "}
-                  <p className="break-all">{runInfoPV.value}</p>
-                </div>
-              ))}
-            </div>
-          </details>
+        <details className="w-full rounded-lg  bg-gray-600 text-white px-0 py-0 mb-2 items-center mt-2">
+          <summary className="flex h-14 font-bold text-center items-center cursor-pointer justify-center rounded-lg w-full bg-gray-800 hover:bg-black">
+            Show/hide all run information
+          </summary>
+          <div className="grid md:grid-cols-5 gap-2 px-4 pt-4">
+            {Array.from(runInfoPVs.values()).map((runInfoPV) => (
+              <div
+                className="mb-2 shadow-xs rounded-md"
+                key={runInfoPV.human_readable_name}
+              >
+                <p className="font-bold">{runInfoPV.human_readable_name}:</p>{" "}
+                <p className="break-all">{runInfoPV.value}</p>
+              </div>
+            ))}
+          </div>
+        </details>
       </div>
     </div>
   );
diff --git a/app/components/__snapshots__/TopBar.test.ts.snap b/app/components/__snapshots__/TopBar.test.ts.snap
index fc6b6b6..7883715 100644
--- a/app/components/__snapshots__/TopBar.test.ts.snap
+++ b/app/components/__snapshots__/TopBar.test.ts.snap
@@ -212,434 +212,425 @@ exports[`renders topbar unchanged 1`] = `
           </tbody>
         </table>
       </div>
-      <label
-        class="p-2 w-full"
-        id="runInfoLabel"
+      <details
+        class="w-full rounded-lg  bg-gray-600 text-white px-0 py-0 mb-2 items-center mt-2"
       >
-        <input
-          class="peer/showLabel absolute scale-0"
-          type="checkbox"
-        />
-        <span
-          class="block max-h-14 overflow-hidden rounded-lg bg-gray-600 hover:bg-gray-800 text-white px-4 py-0 mb-2 transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer items-center"
+        <summary
+          class="flex h-14 font-bold text-center items-center cursor-pointer justify-center rounded-lg w-full bg-gray-800 hover:bg-black"
+        >
+          Show/hide all run information
+        </summary>
+        <div
+          class="grid md:grid-cols-5 gap-2 px-4 pt-4"
         >
-          <h3
-            class="flex h-14 cursor-pointer font-bold text-center items-center justify-center"
-          >
-            Show/hide all run information
-          </h3>
           <div
-            class="grid md:grid-cols-5 gap-2"
+            class="mb-2 shadow-xs rounded-md"
           >
-            <div
-              class="mb-2 shadow-xs rounded-md"
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Config name
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Config name
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Run state
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Run state
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Run number
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Run number
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Good frames
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Good frames
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Raw frames
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Raw frames
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Count Rate
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Count Rate
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                RB Number
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              RB Number
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Current(uamps)
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Current(uamps)
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Total(uamps)
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Total(uamps)
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Monitor counts
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Monitor counts
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Monitor Spectrum
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Monitor Spectrum
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Monitor From
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Monitor From
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Monitor To
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Monitor To
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Shutter Status
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Shutter Status
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Number of Spectra
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Number of Spectra
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Number of Time Channels
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Number of Time Channels
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                DAE Simulation Mode
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              DAE Simulation Mode
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Instrument Time
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Instrument Time
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Start time
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Start time
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Run time
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Run time
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Period
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Period
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Period Raw frames
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Period Raw frames
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Num periods
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Num periods
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Period Run Time
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Period Run Time
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Period Sequence
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Period Sequence
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Period Good Frames
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Period Good Frames
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                DAE Memory Used
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              DAE Memory Used
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Timing Source
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
-            <div
-              class="mb-2 shadow-xs rounded-md"
+              Timing Source
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
+          </div>
+          <div
+            class="mb-2 shadow-xs rounded-md"
+          >
+            <p
+              class="font-bold"
             >
-              <p
-                class="font-bold"
-              >
-                Total Counts
-                :
-              </p>
-               
-              <p
-                class="break-all"
-              />
-            </div>
+              Total Counts
+              :
+            </p>
+             
+            <p
+              class="break-all"
+            />
           </div>
-        </span>
-      </label>
+        </div>
+      </details>
     </div>
   </div>
 </div>