125692 add conditional branch in return

apps/app/src/components/PageList/PageListItemS.tsx

@@ -43,11 +43,29 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
 
   return (
     <>
-      <UserPicture user={page.lastUpdateUser} noLink={noLink} />
-      {pagePathElement}
-      <span className="ml-2">
-        <PageListMeta page={page} />
-      </span>
+      {isBookmarkItem ? (
+        <div className={`${styles['page-list']}`}>
+          <div className="bookmarks-list-items">
+            <UserPicture user={page.lastUpdateUser} noLink={noLink} />
+            <div className="page-path-element">
+              {pagePathElement}
+            </div>
+            <div>
+              <span className="ml-2">
+                <PageListMeta page={page} />
+              </span>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          <UserPicture user={page.lastUpdateUser} noLink={noLink} />
+          {pagePathElement}
+          <span className="ml-2">
+            <PageListMeta page={page} />
+          </span>
+        </>
+      )}
     </>
   );
 

packages/ui/src/styles/molecules/_page_list.scss

@@ -98,4 +98,12 @@
     overflow: hidden;
     line-height: 1.2;
   }
+
+  .bookmarks-list-items {
+    display: flex;
+  }
+
+  .page-path-element {
+    flex: 1;
+  }
 }