From 220ca8a57087ad47c61072c64a03e5c7a54b054e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 2 Feb 2026 20:28:40 +0200
Subject: [PATCH] chore(mobile/note_actions): use new layout styling for
 backlinks

---
 apps/client/src/widgets/Backlinks.css         | 83 +++++++++++++++++++
 .../widgets/FloatingButtonsDefinitions.tsx    |  2 +
 apps/client/src/widgets/layout/StatusBar.css  | 78 -----------------
 apps/client/src/widgets/layout/StatusBar.tsx  |  2 +-
 .../mobile_widgets/mobile_detail_menu.tsx     |  6 +-
 5 files changed, 90 insertions(+), 81 deletions(-)
 create mode 100644 apps/client/src/widgets/Backlinks.css

diff --git a/apps/client/src/widgets/Backlinks.css b/apps/client/src/widgets/Backlinks.css
new file mode 100644
index 0000000000..edcd9097de
--- /dev/null
+++ b/apps/client/src/widgets/Backlinks.css
@@ -0,0 +1,83 @@
+.tn-backlinks-widget .backlinks-items {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: static;
+    width: unset;
+
+    > li {
+        --border-radius: 8px;
+
+        max-width: 600px;
+        padding: 10px 20px;
+        background: var(--card-background-color);
+
+        & + li {
+            margin-top: 2px;
+        }
+
+        &:first-child {
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        &:last-child {
+            border-radius: 0 0 var(--border-radius) var(--border-radius);
+        }
+
+        /* Card header */
+        & > span:first-child {
+            display: block;
+
+            > span {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+
+                /* Note path */
+                > small {
+                    flex: 100%;
+                    order: -1;
+                    font-size: .65rem;
+
+                    .note-path {
+                        padding: 0;
+                    }
+                }
+
+                /* Note icon */
+                > .tn-icon {
+                    color: var(--menu-item-icon-color);
+                }
+
+                /* Note title */
+                > a {
+                    margin-inline-start: 4px;
+                    color: currentColor;
+                    font-weight: 500;
+                }
+            }
+        }
+
+        /* Card content - excerpt */
+        & > span:nth-child(2) > div {
+            all: unset; /* TODO: Remove after disposing the old style from FloatingButtons.css */
+            display: block;
+
+            margin: 8px 0;
+            border-radius: 4px;
+            background: var(--quick-search-result-content-background);
+            padding: 8px;
+            font-size: .75rem;
+
+            a {
+                background: transparent;
+                color: var(--quick-search-result-highlight-color);
+                text-decoration: underline;
+            }
+
+            p {
+                margin: 0;
+            }
+        }
+    }
+}
diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index 0b337687a0..5d19389cf1 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -1,3 +1,5 @@
+import "./Backlinks.css";
+
 import { BacklinkCountResponse, BacklinksResponse, SaveSqlConsoleResponse } from "@triliumnext/commons";
 import { VNode } from "preact";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index c421c3d65e..b3fe412d95 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -160,84 +160,6 @@
 
             max-height: 60vh;
             overflow-y: scroll;
-
-            /* Backlink card */
-            li {
-                --border-radius: 8px;
-
-                max-width: 600px;
-                padding: 10px 20px;
-                background: var(--card-background-color);
-
-                & + li {
-                    margin-top: 2px;
-                }
-
-                &:first-child {
-                    border-radius: var(--border-radius) var(--border-radius) 0 0;
-                }
-
-                &:last-child {
-                    border-radius: 0 0 var(--border-radius) var(--border-radius);
-                }
-
-                /* Card header */
-                & > span:first-child {
-                    display: block;
-
-                    > span {
-                        display: flex;
-                        flex-wrap: wrap;
-                        align-items: center;
-
-                        /* Note path */
-                        > small {
-                            flex: 100%;
-                            order: -1;
-                            font-size: .65rem;
-
-                            .note-path {
-                                padding: 0;
-                            }
-                        }
-
-                        /* Note icon */
-                        > .tn-icon {
-                            color: var(--menu-item-icon-color);
-                        }
-
-                        /* Note title */
-                        > a {
-                            margin-inline-start: 4px;
-                            color: currentColor;
-                            font-weight: 500;
-                        }
-                    }
-                }
-
-                /* Card content - excerpt */
-                & > span:nth-child(2) > div {
-                    all: unset; /* TODO: Remove after disposing the old style from FloatingButtons.css */
-                    display: block;
-
-                    margin: 8px 0;
-                    border-radius: 4px;
-                    background: var(--quick-search-result-content-background);
-                    padding: 8px;
-                    font-size: .75rem;
-
-                    a {
-                        background: transparent;
-                        color: var(--quick-search-result-highlight-color);
-                        text-decoration: underline;
-                    }
-
-                    p {
-                       margin: 0;
-                    }
-                }
-
-            }
         }
     }
 
diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx
index 903aeca3b2..d05fa113df 100644
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -300,7 +300,7 @@ function BacklinksBadge({ note, viewScope }: StatusBarContext) {
     const count = useBacklinkCount(note, viewScope?.viewMode === "default");
     return (note && count > 0 &&
         <StatusBarDropdown
-            className="backlinks-badge backlinks-widget"
+            className="backlinks-badge backlinks-widget tn-backlinks-widget"
             icon="bx bx-link"
             text={t("status_bar.backlinks", { count })}
             title={t("status_bar.backlinks_title", { count })}
diff --git a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
index c01e6051e3..1bac0abfc0 100644
--- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
+++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
@@ -77,7 +77,7 @@ function Backlinks({ note, viewScope, setModalShown }: { note: FNote, viewScope?
         <>
             <FormListItem
                 icon="bx bx-link"
-                onClick={(e) => setModalShown(true)}
+                onClick={() => setModalShown(true)}
             >{t("status_bar.backlinks", { count })}</FormListItem>
             <FormDropdownDivider />
         </>
@@ -93,7 +93,9 @@ function BacklinksModal({ note, modalShown, setModalShown }: { note: FNote | nul
             show={modalShown}
             onHidden={() => setModalShown(false)}
         >
-            {note && <BacklinksList note={note} />}
+            <ul className="backlinks-items">
+                {note && <BacklinksList note={note} />}
+            </ul>
         </Modal>
     );
 }