Fix lsx list rayout

packages/remark-lsx/src/client/components/LsxPageList/LsxListView.module.scss

@@ -1,7 +1,8 @@
 @use '@growi/ui/scss/molecules/page_list';
 
 .page-list :global {
-  .page-list-ul > li > a:not(:hover) {
-    text-decoration: none;
+  .page-list-ul > li > div > a {
+    --grw-wiki-link-color-rgb: $body-color;
+    --grw-wiki-link-hover-color-rgb: $body-color;
   }
 }

packages/remark-lsx/src/client/components/LsxPageList/LsxPage.tsx

@@ -65,8 +65,8 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
   const iconElement: JSX.Element = useMemo(() => {
     const isExists = pageId != null;
     return (isExists)
-      ? <span className="material-symbols-outlined" aria-hidden="true">description</span>
-      : <span className="material-symbols-outlined" aria-hidden="true">draft</span>;
+      ? <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">description</span>
+      : <span className="material-symbols-outlined fs-5 me-1" aria-hidden="true">draft</span>;
   }, [pageId]);
 
   const pagePathElement: JSX.Element = useMemo(() => {
@@ -111,8 +111,9 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
 
   return (
     <li className={`page-list-li ${styles['page-list-li']}`}>
-      <small>{iconElement}</small> {pagePathElement}
-      <span className="ms-2">{pageListMetaElement}</span>
+      <div className="d-flex align-items-center">
+        {iconElement} {pagePathElement}{pageListMetaElement}
+      </div>
       {childrenElements}
     </li>
   );