From 83f20a3c55674bb54d7e22562d969160e43dc7c7 Mon Sep 17 00:00:00 2001
From: Dmitriy Lefterov <62502633+DLineone@users.noreply.github.com>
Date: Sat, 28 Feb 2026 03:45:37 +0300
Subject: [PATCH] add sticky header and mode

---
 frontend/src/styles/popups.scss     | 15 +++++++++++++++
 frontend/src/ts/modals/pb-tables.ts | 12 +++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 5418f2f68af1..d70768b57576 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -915,15 +915,30 @@ body.darkMode {
         padding: 0.5rem 0.5rem;
       }
 
+      .modesticky {
+        position: sticky;
+        top: calc(1rem - 2px);
+        background-color: transparent;
+        z-index: 2;
+      }
+
       thead {
         color: var(--sub-color);
         font-size: 0.75rem;
+        position: sticky;
+        top: -2rem;
+        background-color: var(--bg-color) !important;
+        z-index: 3;
       }
 
       tbody tr:nth-child(odd) td {
         background: var(--sub-alt-color);
       }
 
+      tbody tr:nth-child(even) td {
+        background: var(--bg-color);
+      }
+
       td.infoIcons span {
         margin: 0 0.1rem;
       }
diff --git a/frontend/src/ts/modals/pb-tables.ts b/frontend/src/ts/modals/pb-tables.ts
index 4de644923f60..31dff5bdce2b 100644
--- a/frontend/src/ts/modals/pb-tables.ts
+++ b/frontend/src/ts/modals/pb-tables.ts
@@ -52,8 +52,18 @@ function update(mode: Mode): void {
     }
     modalEl.qs("table tbody")?.appendHtml(
       `
+      ${
+        mode2memory === pb.mode2
+          ? ""
+          : `
+        <tr>
+          <td class="modesticky">${pb.mode2}</td>
+          ${'<td class="modesticky"></td>'.repeat(8)}
+        </tr>
+        `
+      }
       <tr>
-        <td>${mode2memory === pb.mode2 ? "" : pb.mode2}</td>
+        <td></td>
         <td>
           ${Format.typingSpeed(pb.wpm)}
           <br />