fix: table rows with breakout trigger are not accessible below fold

.github/workflows/firebase-hosting-merge.yml

@@ -22,10 +22,13 @@ jobs:
       VITE_FIREBASE_STORAGE_BUCKET: ${{ vars.FIREBASE_STORAGE_BUCKET }}
     steps:
       - uses: actions/checkout@v4
+      - name: Init
+        run: |
+          echo "VITE_GIT_SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-8`" >> $GITHUB_ENV
       - run: yarn install --frozen-lockfile && yarn build && yarn install --cwd functions --frozen-lockfile
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}
           firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_BEERBOOK2_PRODUCTION }}
           channelId: live
-          projectId:  ${{ vars.FIREBASE_PROJECT_ID }}
+          projectId: ${{ vars.FIREBASE_PROJECT_ID }}

src/pages/MyPlaces/MyPlaces.module.css

@@ -0,0 +1,5 @@
+.footer {
+  color: var(--text-3);
+  padding: 0.5rem;
+  text-align: right;
+}

src/pages/MyPlaces/MyPlaces.res

@@ -1,5 +1,11 @@
+type classesType = {footer: string}
+
+@module("./MyPlaces.module.css") external classes: classesType = "default"
+
 type dialogState = Hidden | AddPlace | EditUser
 
+let gitShortSha: string = %raw(`import.meta.env.VITE_GIT_SHORT_SHA`)
+
 module Pure = {
   @genType @react.component
   let make = (
@@ -97,9 +103,8 @@ let make = () => {
   )
   let (dialogState, setDialogState) = React.useState(() => Hidden)
   let hideDialog = _ => setDialogState(_ => Hidden)
-
-  {
-    switch pageDataStatus.data {
+  <>
+    {switch pageDataStatus.data {
     | Some((currentUser, usersPlaces)) =>
       let userDisplayName = currentUser.displayName->Null.getExn
       <>
@@ -159,6 +164,7 @@ let make = () => {
         }}
       </>
     | _ => React.null
-    }
-  }
+    }}
+    <footer className=classes.footer> {React.string("v.\xA0" ++ gitShortSha)} </footer>
+  </>
 }

src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css

@@ -1,12 +1,8 @@
 .table {
   --breakout-hover-overlay: hsl(47deg 100% 62% / 0.1);
 }
-.table tr {
+.table [role="row"] {
   position: relative;
-  /* FIX: Safari does not support positioning of <tr> 
-     @see https://github.com/w3c/csswg-drafts/issues/1899
-  */
-  clip-path: inset(0);
 }
 .table :where(td, th) {
   text-align: left;

src/pages/PlacePersonsSetting/PlacePersonsSetting.res

@@ -112,7 +112,9 @@ let make = (~placeId) => {
               <tbody>
                 {personsAll
                 ->Array.map(((personId, person)) => {
-                  <tr key=personId>
+                  /* FIX: Safari does not support relative positioning of <tr>, div[role=row] is a workaround
+                   @see https://github.com/w3c/csswg-drafts/issues/1899 */
+                  <div key=personId role="row">
                     <th scope="row">
                       {React.string(person.name)}
                       <button
@@ -140,7 +142,7 @@ let make = (~placeId) => {
                         format={FormattedCurrency.formatAccounting} value=person.balance
                       />
                     </td>
-                  </tr>
+                  </div>
                 })
                 ->React.array}
               </tbody>

src/pages/PlaceSetting/ChargedKegs.module.css

@@ -9,12 +9,8 @@
 .table > * {
   display: contents;
 }
-.table tr {
+.table :where(tr, [role="row"]) {
   position: relative;
-  /* FIX: Safari does not support positioning of <tr> 
-     @see https://github.com/w3c/csswg-drafts/issues/1899
-  */
-  clip-path: inset(0);
   display: grid;
   grid-template-areas: "serial beer volume created price remains";
   grid-template-columns: 5ch 22ch 7ch 12ch 12ch 1fr;

src/pages/PlaceSetting/ChargedKegs.res

@@ -31,7 +31,9 @@ let make = (~chargedKegs: array<Db.kegConverted>, ~onAddNewKeg, ~onKegDetail) =>
           ->Array.map(keg => {
             let kegId = Db.getUid(keg)
             let volume = keg.milliliters
-            <tr key={kegId}>
+            /* FIX: Safari does not support relative positioning of <tr>, div[role=row] is a workaround
+             @see https://github.com/w3c/csswg-drafts/issues/1899 */
+            <div key={kegId} role="row">
               <th scope="row">
                 {React.string(keg.serialFormatted)}
                 <button
@@ -54,7 +56,7 @@ let make = (~chargedKegs: array<Db.kegConverted>, ~onAddNewKeg, ~onKegDetail) =>
               <td>
                 <MeterKeg ariaLabelledby="remaining_th" keg />
               </td>
-            </tr>
+            </div>
           })
           ->React.array}
         </tbody>

src/styles/elements.css

@@ -18,8 +18,12 @@ html {
   }
 }
 
+html,
 body {
+  display: flow-root;
   margin: 0;
+  min-block-size: 100vh;
+  min-block-size: 100svh;
   min-inline-size: 100%;
 }
 
@@ -62,3 +66,24 @@ html:has(dialog[open]) {
   overflow: hidden;
   scrollbar-gutter: stable
 }
+
+:where([role="table"]) {
+  display: table;
+}
+
+:where([role="rowgroup"]) {
+  display: table-row-group;
+}
+
+:where([role="row"]) {
+  display: table-row;
+}
+
+:where([role="cell"], [role="columnheader"], [role="rowheader"]) {
+  display: table-cell;
+}
+
+:where([role="columnheader"], [role="rowheader"]) {
+  color: var(--text-2);
+  font-weight: var(--font-weight-semibold);
+}