From 015b0cca52b604f72e527dd5f6cb758939697b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=A1clav=20Gr=C3=B6hling?= <grohling.v@clav.cz>
Date: Mon, 26 Aug 2024 15:48:29 +0200
Subject: [PATCH] Revert "fix: table rows with breakout trigger are not
 accessible below fold"

This reverts commit db338b3ead2cae81fcc3f4b7a16fdcd0ae550986.
---
 .../PlacePersonsSetting/PlacePersonsSetting.module.css      | 6 +++++-
 src/pages/PlacePersonsSetting/PlacePersonsSetting.res       | 6 ++----
 src/pages/PlaceSetting/ChargedKegs.module.css               | 6 +++++-
 src/pages/PlaceSetting/ChargedKegs.res                      | 6 ++----
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css b/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css
index 5315590..814438b 100644
--- a/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css
+++ b/src/pages/PlacePersonsSetting/PlacePersonsSetting.module.css
@@ -1,8 +1,12 @@
 .table {
   --breakout-hover-overlay: hsl(47deg 100% 62% / 0.1);
 }
-.table [role="row"] {
+.table tr {
   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;
diff --git a/src/pages/PlacePersonsSetting/PlacePersonsSetting.res b/src/pages/PlacePersonsSetting/PlacePersonsSetting.res
index 8df75a7..d1df530 100644
--- a/src/pages/PlacePersonsSetting/PlacePersonsSetting.res
+++ b/src/pages/PlacePersonsSetting/PlacePersonsSetting.res
@@ -112,9 +112,7 @@ let make = (~placeId) => {
               <tbody>
                 {personsAll
                 ->Array.map(((personId, person)) => {
-                  /* 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">
+                  <tr key=personId>
                     <th scope="row">
                       {React.string(person.name)}
                       <button
@@ -142,7 +140,7 @@ let make = (~placeId) => {
                         format={FormattedCurrency.formatAccounting} value=person.balance
                       />
                     </td>
-                  </div>
+                  </tr>
                 })
                 ->React.array}
               </tbody>
diff --git a/src/pages/PlaceSetting/ChargedKegs.module.css b/src/pages/PlaceSetting/ChargedKegs.module.css
index af158d6..f5d2c20 100644
--- a/src/pages/PlaceSetting/ChargedKegs.module.css
+++ b/src/pages/PlaceSetting/ChargedKegs.module.css
@@ -9,8 +9,12 @@
 .table > * {
   display: contents;
 }
-.table :where(tr, [role="row"]) {
+.table tr {
   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;
diff --git a/src/pages/PlaceSetting/ChargedKegs.res b/src/pages/PlaceSetting/ChargedKegs.res
index 51b90b0..a6ccc25 100644
--- a/src/pages/PlaceSetting/ChargedKegs.res
+++ b/src/pages/PlaceSetting/ChargedKegs.res
@@ -31,9 +31,7 @@ let make = (~chargedKegs: array<Db.kegConverted>, ~onAddNewKeg, ~onKegDetail) =>
           ->Array.map(keg => {
             let kegId = Db.getUid(keg)
             let volume = keg.milliliters
-            /* 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">
+            <tr key={kegId}>
               <th scope="row">
                 {React.string(keg.serialFormatted)}
                 <button
@@ -56,7 +54,7 @@ let make = (~chargedKegs: array<Db.kegConverted>, ~onAddNewKeg, ~onKegDetail) =>
               <td>
                 <MeterKeg ariaLabelledby="remaining_th" keg />
               </td>
-            </div>
+            </tr>
           })
           ->React.array}
         </tbody>