From 9deaa5d0ded24e5fece056e224f0bb44dc083081 Mon Sep 17 00:00:00 2001
From: Yi Hu <yathu@google.com>
Date: Fri, 7 Aug 2026 11:33:18 -0400
Subject: [PATCH] Fix runner compatibility matrix

---
 .../site/assets/scss/_capability-matrix.scss  | 123 +++++-------------
 .../site/assets/scss/capability-matrix.scss   | 121 +++++------------
 .../documentation/capability-matrix-big.html  |  36 ++---
 .../capability-matrix-single.html             |  37 ++----
 4 files changed, 88 insertions(+), 229 deletions(-)

diff --git a/website/www/site/assets/scss/_capability-matrix.scss b/website/www/site/assets/scss/_capability-matrix.scss
index a3b59a84441d..b55f2ac9143a 100644
--- a/website/www/site/assets/scss/_capability-matrix.scss
+++ b/website/www/site/assets/scss/_capability-matrix.scss
@@ -128,61 +128,13 @@
     }
 }
 .table-container {
-    display: -webkit-box;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
     flex-direction: row;
     margin-bottom: 32px;
+    width: 100%;
     table {
         margin: 0;
     }
-    .big-right {
-        max-width: 1240px;
-    }
-    .table-right {
-        overflow-x: scroll;
-        padding: 1px;
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-            width: 0;
-            background: 0 0;
-        }
-    }
-    .table-headers {
-        overflow-x: scroll;
-        border-spacing: 0;
-        border: solid 1px #d8d8d8;
-        border-bottom: none;
-        mix-blend-mode: multiply;
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-        scroll-behavior: auto;
-        &::-webkit-scrollbar {
-            width: 0;
-            background: 0 0;
-        }
-        table {
-            height: 48px;
-            table-layout: fixed;
-            width: 710px;
-            th {
-                text-align: center;
-                width: 142px;
-                font-size: 12px;
-                font-weight: 500;
-                line-height: normal;
-                letter-spacing: normal;
-                padding-left: 10px;
-                @media(max-width: $mobile) {
-                    width: 73px;
-                }
-            }
-        }
-    }
-    .big-headers table th {
-        width: 249px;
-    }
     .table-center {
         overflow-x: scroll;
         border-spacing: 0;
@@ -192,6 +144,7 @@
         padding-bottom: 8px;
         scrollbar-color: #ff6d00;
         scroll-behavior: auto;
+        width: 100%;
         &::-webkit-scrollbar {
             height: 8px;
             width: 25px !important;
@@ -209,9 +162,17 @@
             transform: rotateX(180deg);
             border-collapse: separate;
             table-layout: fixed;
-            width: 710px;
+            width: max-content;
+            thead tr th {
+                text-align: center;
+                vertical-align: middle;
+                padding: 6px;
+                background-color: #fff;
+                border: 1px solid #d8d8d8;
+            }
             th, td {
                 width: 142px;
+                min-width: 142px;
                 height: 48px;
                 font-size: 12px;
                 font-weight: 500;
@@ -220,17 +181,37 @@
                 border: 1px solid #fff;
                 @media(max-width:640px) {
                     width: 73px;
+                    min-width: 73px;
                 }
             }
+            th.table-left-header {
+                position: sticky;
+                left: 0;
+                z-index: 2;
+                background-color: #fff;
+                border: solid 1px #f6f6f6;
+                border-right: 1px solid #d8d8d8;
+                padding: 6px;
+                text-align: start;
+            }
+            thead tr th.table-left-header {
+                z-index: 3;
+                border: none;
+                border-right: 1px solid #d8d8d8;
+            }
         }
     }
     .big-center {
         table {
+            th, td {
+                width: 249px;
+                min-width: 249px;
+            }
             tr {
                 vertical-align: baseline;
-                th,td {
-                    width: 249px;
-                    height: 352px;
+                th, td {
+                    height: auto;
+                    min-height: 352px;
                     padding: 6px;
                     font-weight: 400;
                     p {
@@ -242,41 +223,9 @@
                     }
                 }
             }
-        }
-    }
-    .table-left table {
-        width: 142px;
-        @media(max-width:640px) {
-            width: 73px;
-        }
-        tr:first-child th {
-            height: 83px;
-            border: none;
-            @media(max-width: $mobile) {
-                height: 119px;
+            th.table-left-header {
+                text-align: start;
             }
-            @-moz-document url-prefix() {
-                height: 77px;
-            }
-        }
-        th {
-            height: 48px;
-            font-size: 12px;
-            font-weight: 500;
-            line-height: normal;
-            letter-spacing: normal;
-            border: solid 1px #f6f6f6;
-            border-right: none;
-            padding: 6px;
-        }
-    }
-    .big-left table {
-        text-align: start;
-        tr {
-            vertical-align: baseline;
-        }
-        th {
-            height: 352px;
         }
     }
 }
diff --git a/website/www/site/assets/scss/capability-matrix.scss b/website/www/site/assets/scss/capability-matrix.scss
index d5e5fc348aae..005b1729f82f 100644
--- a/website/www/site/assets/scss/capability-matrix.scss
+++ b/website/www/site/assets/scss/capability-matrix.scss
@@ -128,60 +128,13 @@
   }
 }
 .table-container {
-  display: -webkit-box;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
   flex-direction: row;
   margin-bottom: 32px;
+  width: 100%;
   table {
     margin: 0;
   }
-  .big-right {
-    max-width: 1240px;
-  }
-  .table-right {
-    overflow-x: scroll;
-    padding: 1px;
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      width: 0;
-      background: 0 0;
-    }
-  }
-  .table-headers {
-    overflow-x: scroll;
-    border-spacing: 0;
-    border: solid 1px #d8d8d8;
-    border-bottom: none;
-    mix-blend-mode: multiply;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      width: 0;
-      background: 0 0;
-    }
-    table {
-      height: 48px;
-      table-layout: fixed;
-      width: 710px;
-      th {
-        text-align: center;
-        width: 142px;
-        font-size: 12px;
-        font-weight: 500;
-        line-height: normal;
-        letter-spacing: normal;
-        padding-left: 10px;
-        @media (max-width: $mobile) {
-          width: 73px;
-        }
-      }
-    }
-  }
-  .big-headers table th {
-    width: 249px;
-  }
   .table-center {
     overflow-x: scroll;
     border-spacing: 0;
@@ -190,6 +143,7 @@
     transform: rotateX(180deg);
     padding-bottom: 8px;
     scrollbar-color: #ff6d00;
+    width: 100%;
     &::-webkit-scrollbar {
       height: 8px;
       width: 25px !important;
@@ -207,10 +161,18 @@
       transform: rotateX(180deg);
       border-collapse: separate;
       table-layout: fixed;
-      width: 710px;
+      width: max-content;
+      thead tr th {
+        text-align: center;
+        vertical-align: middle;
+        padding: 6px;
+        background-color: #fff;
+        border: 1px solid #d8d8d8;
+      }
       th,
       td {
         width: 142px;
+        min-width: 142px;
         height: 48px;
         font-size: 12px;
         font-weight: 500;
@@ -219,18 +181,39 @@
         border: 1px solid #fff;
         @media (max-width: 640px) {
           width: 73px;
+          min-width: 73px;
         }
       }
+      th.table-left-header {
+        position: sticky;
+        left: 0;
+        z-index: 2;
+        background-color: #fff;
+        border: solid 1px #f6f6f6;
+        border-right: 1px solid #d8d8d8;
+        padding: 6px;
+        text-align: start;
+      }
+      thead tr th.table-left-header {
+        z-index: 3;
+        border: none;
+        border-right: 1px solid #d8d8d8;
+      }
     }
   }
   .big-center {
     table {
+      th,
+      td {
+        width: 249px;
+        min-width: 249px;
+      }
       tr {
         vertical-align: baseline;
         th,
         td {
-          width: 249px;
-          height: 352px;
+          height: auto;
+          min-height: 352px;
           padding: 6px;
           font-weight: 400;
           p {
@@ -242,41 +225,9 @@
           }
         }
       }
-    }
-  }
-  .table-left table {
-    width: 142px;
-    @media (max-width: 640px) {
-      width: 73px;
-    }
-    tr:first-child th {
-      height: 83px;
-      border: none;
-      @media (max-width: $mobile) {
-        height: 119px;
+      th.table-left-header {
+        text-align: start;
       }
-      @-moz-document url-prefix() {
-        height: 77px;
-      }
-    }
-    th {
-      height: 48px;
-      font-size: 12px;
-      font-weight: 500;
-      line-height: normal;
-      letter-spacing: normal;
-      border: solid 1px #f6f6f6;
-      border-right: none;
-      padding: 6px;
-    }
-  }
-  .big-left table {
-    text-align: start;
-    tr {
-      vertical-align: baseline;
-    }
-    th {
-      height: 352px;
     }
   }
 }
diff --git a/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html b/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
index 95166f0e04d9..e42caddb7a72 100644
--- a/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
+++ b/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
@@ -24,32 +24,20 @@
         </a>
         <h4>{{ $category.description }}</h4>
         <div class="table-container">
-            <div class="table-left big-left">
+            <div id="{{ $category.description | urlize }}" class="table-center big-center">
                 <table>
-                    <tr>
-                        <th></th>
-                    </tr>
-                    {{ range $row := $category.rows }}
-                        <tr>
-                            <th>{{ $row.name }}</th>
-                        </tr>
-                    {{ end }}
-                </table>
-            </div>
-            <div class="table-right big-right">
-                <div id="{{ $category.description | urlize }}" class="table-headers big-headers">
-                    <table>
+                    <thead>
                         <tr>
+                            <th class="table-left-header"></th>
                             {{ range $column := $cap_data.columns }}
                                 <th>{{ $column.name }}</th>
                             {{ end }}
                         </tr>
-                    </table>
-                </div>
-                <div id="{{ $category.description | urlize }}" class="table-center big-center">
-                    <table>
+                    </thead>
+                    <tbody>
                         {{ range $row := $category.rows }}
                             <tr>
+                                <th class="table-left-header">{{ $row.name }}</th>
                                 {{ range $val := $row.values }}
                                     <td style='background-color:#{{ if eq $val.l1 "Yes" }}{{ index $category "color-y" }}{{ else if eq $val.l1 "Partially" }}{{ index $category "color-p" }}{{ else }}{{ index $category "color-n" }}{{ end }};border-color:#{{ if eq $val.l1 "Yes" }}{{ index $category "color-yb" }}{{ else if eq $val.l1 "Partially" }}{{ index $category "color-pb" }}{{ else }}{{ index $category "color-nb" }}{{ end }}'>
                                         {{ partial "documentation/capability-matrix-row" (dict "type" $cap_view "val" $val) }}
@@ -57,18 +45,10 @@ <h4>{{ $category.description }}</h4>
                                 {{ end }}
                             </tr>
                         {{ end }}
-                    </table>
-                </div>
+                    </tbody>
+                </table>
             </div>
         </div>
     {{ end }}
 {{ end }}
 
-<script>
-    $('.table-headers').bind('wheel',function(e){
-        $('#'+this.id+'.table-center').scrollLeft($(this).scrollLeft());
-    });
-    $('.table-center').bind('wheel',function(e){
-        $('#'+this.id+'.table-headers').scrollLeft($(this).scrollLeft());
-    });
-</script>
diff --git a/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html b/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
index da436257fe7a..8c63b5c49bd4 100644
--- a/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
+++ b/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
@@ -55,32 +55,20 @@ <h5>What do those signs mean?</h5>
 {{ range $category := $cap_data.categories }}
     <h4>{{ $category.description }}</h4>
     <div class="table-container">
-        <div class="table-left">
+        <div id="{{ $category.description | urlize }}" class="table-center">
             <table>
-                <tr>
-                    <th></th>
-                </tr>
-                {{ range $row := $category.rows }}
-                    <tr>
-                        <th>{{ $row.name }}</th>
-                    </tr>
-                {{ end }}
-            </table>
-        </div>
-        <div class="table-right">
-            <div id="{{ $category.description | urlize }}" class="table-headers">
-                <table>
+                <thead>
                     <tr>
+                        <th class="table-left-header"></th>
                         {{ range $column := $cap_data.columns }}
                             <th>{{ $column.name }}</th>
                         {{ end }}
                     </tr>
-                </table>
-            </div>
-            <div id="{{ $category.description | urlize }}" class="table-center">
-                <table>
+                </thead>
+                <tbody>
                     {{ range $row := $category.rows }}
                         <tr>
+                            <th class="table-left-header">{{ $row.name }}</th>
                             {{ range $val := $row.values }}
                                 <td style='background-color:#{{ if eq $val.l1 "Yes" }}{{ index $category "color-y" }}{{ else if eq $val.l1 "Partially" }}{{ index $category "color-p" }}{{ else }}{{ index $category "color-n" }}{{ end }};border-color:#{{ if eq $val.l1 "Yes" }}{{ index $category "color-yb" }}{{ else if eq $val.l1 "Partially" }}{{ index $category "color-pb" }}{{ else }}{{ index $category "color-nb" }}{{ end }}'>
                                     {{ partial "documentation/capability-matrix-row" (dict "type" $cap_view "val" $val) }}
@@ -88,19 +76,10 @@ <h4>{{ $category.description }}</h4>
                             {{ end }}
                         </tr>
                     {{ end }}
-                </table>
-            </div>
+                </tbody>
+            </table>
         </div>
     </div>
     <a id="table-link" href="/documentation/runners/capability-matrix/{{ $category.description | urlize }}/">{{ T "capability-go-big" }}</a>
 {{ end }}
 
-<script>
-    $('.table-headers').scroll(function(e){
-        $('#'+this.id+'.table-center').scrollLeft($(this).scrollLeft());
-    });
-    $('.table-center').scroll(function(e){
-        $('#'+this.id+'.table-headers').scrollLeft($(this).scrollLeft());
-    });
-
-</script>