feat: move recent reads below the title

apps/desktop/layer/renderer/src/modules/entry-content/components/EntryTitle.tsx

@@ -93,16 +93,6 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
   ) : (
     <div className="group relative block min-w-0 rounded-lg">
       <div className="flex flex-col gap-3">
-        {/* Recent Readers */}
-        {aiEnabled &&
-          (hideRecentReader ? (
-            <div className="h-8" />
-          ) : (
-            <div className="-mb-2 mt-2 flex h-8 items-center">
-              <EntryReadHistory entryId={entryId} />
-            </div>
-          ))}
-
         <a
           href={populatedFullHref ?? "#"}
           target="_blank"
@@ -166,6 +156,15 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
             )}
           </div>
         </div>
+        {/* Recent Readers */}
+        {aiEnabled &&
+          (hideRecentReader ? (
+            <div className="h-6" />
+          ) : (
+            <div className="-mb-2 mt-2 flex h-6 items-center">
+              <EntryReadHistory entryId={entryId} />
+            </div>
+          ))}
       </div>
     </div>
   )

apps/desktop/layer/renderer/src/modules/entry-content/components/entry-read-history/EntryUser.tsx

@@ -17,14 +17,14 @@ export const EntryUser: Component<{
   const presentUserProfile = usePresentUserProfileModal("drawer")
   if (!user) return null
   return (
-    <div className="no-drag-region relative cursor-pointer hover:!z-[99999]" ref={ref}>
+    <div className="no-drag-region center relative cursor-pointer hover:!z-[99999]" ref={ref}>
       <button
         type="button"
         onClick={() => {
           presentUserProfile(userId)
         }}
       >
-        <Avatar className="border-border ring-background aspect-square size-7 border ring-1">
+        <Avatar className="border-border ring-background aspect-square size-6 border ring-1">
           <AvatarImage
             src={replaceImgUrlIfNeed(user?.image || undefined)}
             className="bg-material-ultra-thick"

apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/ArticleLayout.tsx

@@ -81,7 +81,7 @@ export const ArticleLayout: React.FC<ArticleLayoutProps> = ({
   if (!entry) return null
 
   return (
-    <div className={cn(readableContentMaxWidthClassName, "@[500px]:px-4 mx-auto")}>
+    <div className={cn(readableContentMaxWidthClassName, "@[500px]:px-4 mx-auto mt-1")}>
       <EntryTitle entryId={entryId} compact={compact} />
 
       <ArticleAudioPlayer entryId={entryId} />
@@ -94,7 +94,7 @@ export const ArticleLayout: React.FC<ArticleLayoutProps> = ({
       />
 
       <WrappedElementProvider boundingDetection>
-        <div className="mx-auto mb-32 mt-8 max-w-full cursor-auto text-[0.94rem]">
+        <div className="mx-auto mb-32 mt-6 max-w-full cursor-auto text-[0.94rem]">
           {shouldShowAISummary && <AISummary entryId={entryId} />}
           <ErrorBoundary fallback={EntryRenderError}>
             <ReadabilityNotice entryId={entryId} />