fix(mobile): backlink ordering in doc info (#9015)

fix AF-1885

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts

@@ -88,13 +88,13 @@ globalStyle(`${link} .affine-reference-title`, {
 export const linkPreviewContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: '8px',
 });
 
 export const linkPreview = style({
   border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
   borderRadius: '8px',
   padding: '8px',
+  marginBottom: '8px',
   color: cssVarV2('text/primary'),
   ':hover': {
     backgroundColor: cssVarV2('layer/background/hoverOverlay'),

packages/frontend/core/src/desktop/dialogs/doc-info/info-modal.tsx

@@ -95,26 +95,6 @@ export const InfoTable = ({
 
   return (
     <>
-      {backlinks && backlinks.length > 0 ? (
-        <>
-          <LinksRow
-            references={backlinks}
-            onClick={onClose}
-            label={t['com.affine.page-properties.backlinks']()}
-          />
-          <Divider size="thinner" />
-        </>
-      ) : null}
-      {links && links.length > 0 ? (
-        <>
-          <LinksRow
-            references={links}
-            onClick={onClose}
-            label={t['com.affine.page-properties.outgoing-links']()}
-          />
-          <Divider size="thinner" />
-        </>
-      ) : null}
       <PropertyCollapsibleSection
         title={t.t('com.affine.workspace.properties')}
       >
@@ -166,6 +146,26 @@ export const InfoTable = ({
       </PropertyCollapsibleSection>
       <Divider size="thinner" />
       <DocDatabaseBacklinkInfo onChange={onBacklinkPropertyChange} />
+      {backlinks && backlinks.length > 0 ? (
+        <>
+          <LinksRow
+            references={backlinks}
+            onClick={onClose}
+            label={t['com.affine.page-properties.backlinks']()}
+          />
+          <Divider size="thinner" />
+        </>
+      ) : null}
+      {links && links.length > 0 ? (
+        <>
+          <LinksRow
+            references={links}
+            onClick={onClose}
+            label={t['com.affine.page-properties.outgoing-links']()}
+          />
+          <Divider size="thinner" />
+        </>
+      ) : null}
     </>
   );
 };

packages/frontend/core/src/mobile/components/doc-info/doc-info.tsx

@@ -78,27 +78,6 @@ export const DocInfoSheet = ({
         <Suspense>
           <TimeRow docId={docId} className={styles.timeRow} />
           <Divider size="thinner" />
-          {backlinks && backlinks.length > 0 ? (
-            <>
-              <LinksRow
-                className={styles.linksRow}
-                references={backlinks}
-                label={t['com.affine.page-properties.backlinks']()}
-              />
-              <Divider size="thinner" />
-            </>
-          ) : null}
-          {links && links.length > 0 ? (
-            <>
-              <LinksRow
-                className={styles.linksRow}
-                references={links}
-                label={t['com.affine.page-properties.outgoing-links']()}
-              />
-              <Divider size="thinner" />
-            </>
-          ) : null}
-
           <PropertyCollapsibleSection
             title={t.t('com.affine.workspace.properties')}
           >
@@ -150,6 +129,27 @@ export const DocInfoSheet = ({
           <Divider size="thinner" />
 
           <DocDatabaseBacklinkInfo />
+
+          {backlinks && backlinks.length > 0 ? (
+            <>
+              <LinksRow
+                className={styles.linksRow}
+                references={backlinks}
+                label={t['com.affine.page-properties.backlinks']()}
+              />
+              <Divider size="thinner" />
+            </>
+          ) : null}
+          {links && links.length > 0 ? (
+            <>
+              <LinksRow
+                className={styles.linksRow}
+                references={links}
+                label={t['com.affine.page-properties.outgoing-links']()}
+              />
+              <Divider size="thinner" />
+            </>
+          ) : null}
         </Suspense>
       </Scrollable.Viewport>
       <Scrollable.Scrollbar className={styles.scrollBar} />