From 8b854b5cda869a36795e03e7e8f3f5603e1635bd Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Sat, 5 Apr 2025 17:12:40 +0200
Subject: [PATCH] remove intermediate element by rendering the mantine Paper as
 <article>

---
 .../src/components/content/FeedEntries.tsx    | 29 +++++++------------
 .../src/components/content/FeedEntry.tsx      |  3 ++
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx
index b6d38bb4..a1686432 100644
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -307,25 +307,18 @@ export function FeedEntries() {
             loader={<Box key={0}>{loading && <Loader />}</Box>}
         >
             {entries.map(entry => (
-                <article
+                <FeedEntry
                     key={entry.id}
-                    ref={el => {
-                        if (el) el.id = Constants.dom.entryId(entry)
-                    }}
-                    data-id={entry.id}
-                >
-                    <FeedEntry
-                        entry={entry}
-                        expanded={!!entry.expanded || viewMode === "expanded"}
-                        selected={entry.id === selectedEntryId}
-                        showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
-                        maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
-                        onHeaderClick={event => headerClicked(entry, event)}
-                        onHeaderRightClick={event => headerRightClicked(entry, event)}
-                        onBodyClick={() => bodyClicked(entry)}
-                        onSwipedLeft={async () => await swipedLeft(entry)}
-                    />
-                </article>
+                    entry={entry}
+                    expanded={!!entry.expanded || viewMode === "expanded"}
+                    selected={entry.id === selectedEntryId}
+                    showSelectionIndicator={entry.id === selectedEntryId && (!entry.expanded || viewMode === "expanded")}
+                    maxWidth={sidebarVisible ? Constants.layout.entryMaxWidth : undefined}
+                    onHeaderClick={event => headerClicked(entry, event)}
+                    onHeaderRightClick={event => headerRightClicked(entry, event)}
+                    onBodyClick={() => bodyClicked(entry)}
+                    onSwipedLeft={async () => await swipedLeft(entry)}
+                />
             ))}
         </InfiniteScroll>
     )
diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx
index e46f7a12..56c464f7 100644
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -137,6 +137,9 @@ export function FeedEntry(props: FeedEntryProps) {
     const compactHeader = !props.expanded && (viewMode === "title" || viewMode === "cozy")
     return (
         <Paper
+            component="article"
+            id={Constants.dom.entryId(props.entry)}
+            data-id={props.entry.id}
             withBorder
             radius={borderRadius}
             className={cx(classes.paper, {