From c42bb1f6b464dc6c97e890d1afabd92b2506acab Mon Sep 17 00:00:00 2001
From: Wouter Devriendt <wouterdevriendt@meta.com>
Date: Mon, 17 Mar 2025 10:33:02 -0700
Subject: [PATCH 1/2] fix table background overflow

---
 torchci/components/hud.module.css                 | 13 ++++++++++++-
 .../[repoName]/[branch]/[[...page]].tsx           | 15 ++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/torchci/components/hud.module.css b/torchci/components/hud.module.css
index 5bf1a5a0d6..e3e2182cab 100644
--- a/torchci/components/hud.module.css
+++ b/torchci/components/hud.module.css
@@ -3,6 +3,15 @@
   border-collapse: collapse;
   width: max-content;
   line-height: 1;
+  padding: 0;
+}
+
+/* Table wrapper with background to support rotated headers */
+.hudTableContainer {
+  background-color: var(--dropdown-bg);
+  display: inline-block;
+  padding-right: 100px;
+  margin-right: -100px; /* Offset the padding to maintain original spacing */
 }
 
 /* Fix the width of these columns to avoid layout shift when loading the HUD
@@ -22,6 +31,7 @@
 .colJob {
   width: 1.2ch;
   min-width: 14px;
+  position: relative; /* Add this to extend background */
 }
 .colAuthor {
   width: 12ch;
@@ -51,7 +61,7 @@
   flex: 1;
 }
 
-/* code to roatate the workflow name headers */
+/* code to rotate the workflow name headers */
 .jobHeader {
   font-family: sans-serif;
   height: 150px;
@@ -60,6 +70,7 @@
   padding-right: 4px;
 }
 
+
 .jobHeaderName {
   transform: translate(5px, 60px) rotate(315deg);
   width: 12px;
diff --git a/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx b/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
index a32e3a667b..3d03762b1a 100644
--- a/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
+++ b/torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
@@ -329,11 +329,16 @@ function GroupFilterableHudTable({
           />
           <MonsterFailuresCheckbox />
         </div>
-        <table className={styles.hudTable} style={{ overflow: "auto" }}>
-          <GroupHudTableColumns names={headerNames} />
-          <GroupHudTableHeader names={headerNames} />
-          {children}
-        </table>
+        {/* Table wrapper with custom class for extended background */}
+        <div style={{ overflowX: "auto" }}>
+          <div className={styles.hudTableContainer}>
+            <table className={styles.hudTable}>
+              <GroupHudTableColumns names={headerNames} />
+              <GroupHudTableHeader names={headerNames} />
+              {children}
+            </table>
+          </div>
+        </div>
       </div>
     </>
   );

From 4496c6b05c1e38616b9f91992f009189ddd414fb Mon Sep 17 00:00:00 2001
From: Wouter Devriendt <wouterdevriendt@meta.com>
Date: Mon, 17 Mar 2025 10:36:59 -0700
Subject: [PATCH 2/2] fix lint

---
 torchci/components/hud.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/torchci/components/hud.module.css b/torchci/components/hud.module.css
index e3e2182cab..850e2cdd75 100644
--- a/torchci/components/hud.module.css
+++ b/torchci/components/hud.module.css
@@ -70,7 +70,6 @@
   padding-right: 4px;
 }
 
-
 .jobHeaderName {
   transform: translate(5px, 60px) rotate(315deg);
   width: 12px;