From 96e64b8d96645c35a2c50e8d491860ac39ccc1a1 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Fri, 31 Mar 2023 14:14:52 +0800
Subject: [PATCH 01/14] Add `overflow: hidden` to `.bc-table`

---
 .../document/ingredients/browser-compatibility-table/index.scss  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index 82241659a1cc..9fa265189e67 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -9,6 +9,7 @@
   border-radius: var(--elem-radius);
   border-spacing: 0;
   margin: 1rem 0;
+  overflow: hidden;
   width: 100%;
 
   td,

From b8df4f5b902e5bae8446d9b5952440cc6677f3e9 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Fri, 31 Mar 2023 14:15:26 +0800
Subject: [PATCH 02/14] Make `.bc-table thead` sticky

---
 .../browser-compatibility-table/index-desktop.scss           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
index 5db51b15bb34..65645a1f749c 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
@@ -3,7 +3,11 @@
 @media screen and (min-width: $screen-sm) {
   .bc-table {
     thead {
+      background-color: var(--background-primary);
       display: table-header-group;
+      position: sticky;
+      top: var(--main-document-header-height);
+      z-index: var(--z-index-low);
 
       .bc-platforms {
         th {
@@ -34,7 +38,6 @@
 
   .table-container {
     margin: 0 -3rem;
-    overflow: auto;
     width: 100vw;
   }
 

From ab700fed2f8a48c8fbc2007dcac27448b2d687bb Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Thu, 6 Apr 2023 12:54:55 +0800
Subject: [PATCH 03/14] Revert changes to `index-desktop.scss`

---
 .../browser-compatibility-table/index-desktop.scss           | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
index 65645a1f749c..5db51b15bb34 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
@@ -3,11 +3,7 @@
 @media screen and (min-width: $screen-sm) {
   .bc-table {
     thead {
-      background-color: var(--background-primary);
       display: table-header-group;
-      position: sticky;
-      top: var(--main-document-header-height);
-      z-index: var(--z-index-low);
 
       .bc-platforms {
         th {
@@ -38,6 +34,7 @@
 
   .table-container {
     margin: 0 -3rem;
+    overflow: auto;
     width: 100vw;
   }
 

From 2e1f4c5c0de46f92383b7199c9e5bb3274475cbc Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Thu, 6 Apr 2023 12:55:14 +0800
Subject: [PATCH 04/14] Make BCD table sticky for `screen-md` and above

---
 .../index-desktop-md.scss                     | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index 8fe71876fb26..f0f1b50e4629 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -1,11 +1,39 @@
 @media screen and (min-width: $screen-md) {
   .table-container {
+    overflow: initial;
     width: calc(100% + 6rem);
   }
+  
+  .table-container-inner {
+    min-width: auto;
+  }
 
   .bc-table {
-    tbody th {
-      width: 20%;
+    overflow: hidden;
+    table-layout: fixed;
+
+    thead {
+      background-color: var(--background-primary);
+      top: var(--main-document-header-height);
+      position: sticky;
+      z-index: var(--z-index-low)
+    }
+
+    td,
+    th {
+      width: auto;
+    }
+  }
+
+  .bc-platforms {
+    td {
+      width: 25%;
+    }
+  }
+
+  .bc-table-row-header {
+    code {
+      overflow-wrap: anywhere;
     }
   }
 }

From a9e27e9f7bad2f24b50da31c93994662dbd8b584 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Thu, 6 Apr 2023 13:01:24 +0800
Subject: [PATCH 05/14] Fix linting

---
 .../browser-compatibility-table/index-desktop-md.scss           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index f0f1b50e4629..6a951582e745 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -3,7 +3,7 @@
     overflow: initial;
     width: calc(100% + 6rem);
   }
-  
+
   .table-container-inner {
     min-width: auto;
   }

From d65d2360be6d180fda919a00320d7d15eca6709b Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Thu, 6 Apr 2023 13:05:13 +0800
Subject: [PATCH 06/14] Fix linting

---
 .../browser-compatibility-table/index-desktop-md.scss           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index 6a951582e745..a3490634db1a 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -16,7 +16,7 @@
       background-color: var(--background-primary);
       top: var(--main-document-header-height);
       position: sticky;
-      z-index: var(--z-index-low)
+      z-index: var(--z-index-low);
     }
 
     td,

From 4da1d3849a0ada91d5cc26cadc5083fd77811295 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Thu, 6 Apr 2023 13:10:58 +0800
Subject: [PATCH 07/14] Fix linting

---
 .../browser-compatibility-table/index-desktop-md.scss           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index a3490634db1a..85bde8e30880 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -14,8 +14,8 @@
 
     thead {
       background-color: var(--background-primary);
-      top: var(--main-document-header-height);
       position: sticky;
+      top: var(--main-document-header-height);
       z-index: var(--z-index-low);
     }
 

From b211d13962dbfdaa55c16610698383b2e6e08c88 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Thu, 6 Apr 2023 14:19:34 +0800
Subject: [PATCH 08/14] Revert changes to `index.scss`

---
 .../document/ingredients/browser-compatibility-table/index.scss  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index 9fa265189e67..82241659a1cc 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -9,7 +9,6 @@
   border-radius: var(--elem-radius);
   border-spacing: 0;
   margin: 1rem 0;
-  overflow: hidden;
   width: 100%;
 
   td,

From 522a84608b351779120accea07e099ec867e015e Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Sun, 16 Apr 2023 15:39:06 +0800
Subject: [PATCH 09/14] Remove unused block

---
 .../ingredients/browser-compatibility-table/index.scss   | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index 82241659a1cc..72dd5974a907 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -41,15 +41,6 @@
     tr {
       height: 3rem;
 
-      @media screen and (min-width: $screen-md) {
-        &:last-child {
-          th,
-          td {
-            border-bottom-width: 0;
-          }
-        }
-      }
-
       th {
         border-left-width: 0;
         vertical-align: middle;

From cf417756a4005c74a7b74e74fe44de64206fad7b Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Sun, 16 Apr 2023 15:39:08 +0800
Subject: [PATCH 10/14] Sticky BCD table - version 3

---
 .../index-desktop-md.scss                     | 81 ++++++++++++++-----
 1 file changed, 60 insertions(+), 21 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index 85bde8e30880..84848fa1ccd2 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -1,39 +1,78 @@
 @media screen and (min-width: $screen-md) {
   .table-container {
-    overflow: initial;
     width: calc(100% + 6rem);
   }
 
-  .table-container-inner {
-    min-width: auto;
+  .bc-table-container {
+    margin: 1rem -3rem 0;
+    max-height: calc(100vh - var(--main-document-header-height) - 8rem);
   }
 
   .bc-table {
-    overflow: hidden;
-    table-layout: fixed;
+    border: none;
+    margin: 0 0 1rem;
 
-    thead {
-      background-color: var(--background-primary);
-      position: sticky;
-      top: var(--main-document-header-height);
-      z-index: var(--z-index-low);
+    .bc-browsers {
+      td {
+        border-left: 1px solid var(--border-primary);
+      }
+
+      th:last-child {
+        border-right: 1px solid var(--border-primary);
+      }
     }
 
-    td,
-    th {
-      width: auto;
+    .bc-platforms {
+      td {
+        border-left: 1px solid var(--border-primary);
+        border-top: 1px solid var(--border-primary);
+        border-top-left-radius: var(--elem-radius);
+      }
+
+      th {
+        border-top: 1px solid var(--border-primary);
+
+        &:last-child {
+          border-right: 1px solid var(--border-primary);
+          border-top-right-radius: var(--elem-radius);
+        }
+      }
     }
-  }
 
-  .bc-platforms {
-    td {
-      width: 25%;
+    tbody tr {
+      td:last-child {
+        border-right: 1px solid var(--border-primary);
+      }
+
+      th {
+        border-left: 1px solid var(--border-primary);
+      }
+
+      &:last-child {
+        td {
+          border-bottom-color: var(--border-primary);
+
+          &:last-child {
+            border-bottom-right-radius: var(--elem-radius);
+          }
+        }
+
+        th {
+          border-bottom-color: var(--border-primary);
+          border-bottom-left-radius: var(--elem-radius);
+        }
+      }
+    }
+
+    thead {
+      background-color: var(--background-primary);
+      position: sticky;
+      top: 0;
+      z-index: var(--z-index-low);
     }
-  }
 
-  .bc-table-row-header {
-    code {
-      overflow-wrap: anywhere;
+    tbody th {
+      width: 20%;
     }
   }
 }

From 50f29be5c0d72faf77cc121887f6e2c0103b9556 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Sun, 16 Apr 2023 15:39:10 +0800
Subject: [PATCH 11/14] Relocate margin

---
 .../browser-compatibility-table/index-desktop-xl.scss         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
index 82a8c1294f72..86cd2aee203a 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
@@ -3,6 +3,10 @@
     margin: 0;
     width: 100%;
   }
+  
+  .bc-table-container {
+    margin: 1rem 0 0;
+  }
 
   .table-container-inner {
     padding: 0;

From f1f41830c2abe8a8f6ff760e570cbba496ece61f Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Sun, 16 Apr 2023 15:42:08 +0800
Subject: [PATCH 12/14] Linting

---
 .../browser-compatibility-table/index-desktop-xl.scss           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
index 86cd2aee203a..66f80b736ea5 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
@@ -3,7 +3,7 @@
     margin: 0;
     width: 100%;
   }
-  
+
   .bc-table-container {
     margin: 1rem 0 0;
   }

From 2ac80508f4129db6b97b063c4216ab6faf4077d7 Mon Sep 17 00:00:00 2001
From: yarusome <97945148+yarusome@users.noreply.github.com>
Date: Sun, 16 Apr 2023 16:07:04 +0800
Subject: [PATCH 13/14] Simplify nesting

---
 .../index-desktop-md.scss                     | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index 84848fa1ccd2..4568bb8293b7 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -12,33 +12,6 @@
     border: none;
     margin: 0 0 1rem;
 
-    .bc-browsers {
-      td {
-        border-left: 1px solid var(--border-primary);
-      }
-
-      th:last-child {
-        border-right: 1px solid var(--border-primary);
-      }
-    }
-
-    .bc-platforms {
-      td {
-        border-left: 1px solid var(--border-primary);
-        border-top: 1px solid var(--border-primary);
-        border-top-left-radius: var(--elem-radius);
-      }
-
-      th {
-        border-top: 1px solid var(--border-primary);
-
-        &:last-child {
-          border-right: 1px solid var(--border-primary);
-          border-top-right-radius: var(--elem-radius);
-        }
-      }
-    }
-
     tbody tr {
       td:last-child {
         border-right: 1px solid var(--border-primary);
@@ -75,4 +48,31 @@
       width: 20%;
     }
   }
+
+  .bc-browsers {
+    td {
+      border-left: 1px solid var(--border-primary);
+    }
+
+    th:last-child {
+      border-right: 1px solid var(--border-primary);
+    }
+  }
+
+  .bc-platforms {
+    td {
+      border-left: 1px solid var(--border-primary);
+      border-top: 1px solid var(--border-primary);
+      border-top-left-radius: var(--elem-radius);
+    }
+
+    th {
+      border-top: 1px solid var(--border-primary);
+
+      &:last-child {
+        border-right: 1px solid var(--border-primary);
+        border-top-right-radius: var(--elem-radius);
+      }
+    }
+  }
 }

From 6c51365496bd84e0cad7e74249df9c302442e5d6 Mon Sep 17 00:00:00 2001
From: Leo McArdle <lmcardle@mozilla.com>
Date: Fri, 12 May 2023 15:08:08 +0000
Subject: [PATCH 14/14] add bc-table-container class

---
 .../document/ingredients/browser-compatibility-table/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index.tsx b/client/src/document/ingredients/browser-compatibility-table/index.tsx
index b1abf0bb7716..ba0b622fd98a 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.tsx
+++ b/client/src/document/ingredients/browser-compatibility-table/index.tsx
@@ -175,7 +175,7 @@ export default function BrowserCompatibilityTable({
         >
           Report problems with this compatibility data on GitHub
         </a>
-        <figure className="table-container">
+        <figure className="table-container bc-table-container">
           <figure className="table-container-inner">
             <table key="bc-table" className="bc-table bc-table-web">
               <Headers