From 07edf697f0e45a8da7449d2e9b519d9a06c8d5ab Mon Sep 17 00:00:00 2001
From: Emma Segal-Grossman <hi@emma.cafe>
Date: Thu, 8 Feb 2024 17:41:33 -0500
Subject: [PATCH] Hotfix: Crawls page table click targets not applied to the
 right elements (#1524)

Fixes #1525

### Changes

- Changes one of the table cell component usages in the crawl list page
to correctly use the `rowClickTarget` prop, rather than setting the
class to `rowClickTarget`.
- Updates the `rowClickTarget` styling to only apply _within_ a
`<btrix-table-cell>`
---
 frontend/src/components/ui/table/table.stylesheet.css | 6 +++---
 frontend/src/features/archived-items/crawl-list.ts    | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/table/table.stylesheet.css b/frontend/src/components/ui/table/table.stylesheet.css
index dfd1dc23..0a51ee34 100644
--- a/frontend/src/components/ui/table/table.stylesheet.css
+++ b/frontend/src/components/ui/table/table.stylesheet.css
@@ -5,11 +5,11 @@ btrix-table-cell[rowClickTarget] {
   overflow: hidden;
 }
 
-.rowClickTarget {
+btrix-table-cell .rowClickTarget {
   max-width: 100%;
 }
 
-.rowClickTarget::after {
+btrix-table-cell .rowClickTarget::after {
   content: "";
   display: block;
   position: absolute;
@@ -17,7 +17,7 @@ btrix-table-cell[rowClickTarget] {
   grid-column: clickable-start / clickable-end;
 }
 
-.rowClickTarget:focus-visible {
+btrix-table-cell .rowClickTarget:focus-visible {
   outline: var(--sl-focus-ring);
   outline-offset: -0.25rem;
   border-radius: 0.5rem;
diff --git a/frontend/src/features/archived-items/crawl-list.ts b/frontend/src/features/archived-items/crawl-list.ts
index acd18853..7edfa790 100644
--- a/frontend/src/features/archived-items/crawl-list.ts
+++ b/frontend/src/features/archived-items/crawl-list.ts
@@ -112,7 +112,7 @@ export class CrawlListItem extends TailwindElement {
         </btrix-table-cell>
       `;
       idCell = html`
-        <btrix-table-cell class="rowClickTarget">
+        <btrix-table-cell rowClickTarget="a">
           ${this.href
             ? html`<a href=${this.href} @click=${this.navigate.link}>
                 ${label}