fix: optimize print mode

Signed-off-by: Innei <i@innei.in>

Author: Innei

apps/renderer/src/modules/entry-column/index.tsx

@@ -201,6 +201,7 @@ function EntryColumnImpl() {
 
   return (
     <div
+      data-hide-in-print
       className="relative flex h-full flex-1 flex-col @container"
       onClick={() =>
         navigate({

apps/renderer/src/modules/entry-content/components/EntryPlaceholderLogo.tsx

@@ -13,6 +13,7 @@ export const EntryPlaceholderLogo = () => {
 
   return (
     <div
+      data-hide-in-print
       onContextMenu={stopPropagation}
       className={cn(
         "flex w-full min-w-0 flex-col items-center justify-center gap-1 px-12 pb-6 text-center text-lg font-medium text-zinc-400 duration-500",

apps/renderer/src/modules/entry-content/components/EntryReadHistory.tsx

@@ -65,7 +65,10 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) =>
   if (!entryHistory.userIds) return null
 
   return (
-    <div className="hidden items-center duration-200 animate-in fade-in @md:flex">
+    <div
+      className="hidden items-center duration-200 animate-in fade-in @md:flex"
+      data-hide-in-print
+    >
       {entryHistory.userIds
         .filter((id) => id !== me?.id)
         .slice(0, LIMIT)

apps/renderer/src/modules/entry-content/components/SourceContentView.tsx

@@ -83,6 +83,7 @@ export const SourceContentPanel = ({ src }: { src: string | null }) => {
     <AnimatePresence>
       {showSourceContent && src && (
         <m.div
+          data-hide-in-print
           className="absolute left-0 top-0 z-[1] size-full bg-theme-background"
           initial="hidden"
           animate="visible"

apps/renderer/src/modules/entry-content/components/SupportCreator.tsx

@@ -39,9 +39,9 @@ export const SupportCreator = ({ entryId }: { entryId: string }) => {
 
   return (
     <>
-      <Divider />
+      <Divider data-hide-in-print />
 
-      <div className="my-16 flex flex-col items-center gap-8">
+      <div className="my-16 flex flex-col items-center gap-8" data-hide-in-print>
         {feed.ownerUserId ? (
           <UserAvatar
             className="w-40 flex-col gap-3 p-0"

apps/renderer/src/modules/entry-content/header.tsx

@@ -64,6 +64,7 @@ function EntryHeaderImpl({
 
   return (
     <div
+      data-hide-in-print
       className={cn(
         "relative flex min-w-0 items-center justify-between gap-3 overflow-hidden text-lg text-zinc-500 duration-200 zen-mode-macos:ml-margin-macos-traffic-light-x",
         shouldShowMeta && "border-b border-border",
@@ -82,7 +83,10 @@ function EntryHeaderImpl({
           <EntryReadHistory entryId={entryId} />
         </div>
       )}
-      <div className="relative z-10 flex w-full items-center justify-between gap-3">
+      <div
+        className="relative z-10 flex w-full items-center justify-between gap-3"
+        data-hide-in-print
+      >
         <div className="flex min-w-0 shrink grow">
           <AnimatePresence>
             {shouldShowMeta && (

apps/renderer/src/modules/entry-content/index.tsx

@@ -161,6 +161,7 @@ export const EntryContentRender: Component<{
     [entry?.entries.media, data?.entries.media],
   )
   const customCSS = useUISettingKey("customCSS")
+
   if (!entry) return null
 
   const content = entry?.entries.content ?? data?.entries.content
@@ -200,12 +201,15 @@ export const EntryContentRender: Component<{
         compact={compact}
       />
 
-      <div className="relative flex size-full flex-col overflow-hidden @container">
+      <div className="relative flex size-full flex-col overflow-hidden @container print:size-auto print:overflow-visible">
         <EntryTimelineSidebar entryId={entry.entries.id} />
         <ScrollArea.ScrollArea
           mask={false}
-          rootClassName={cn("h-0 min-w-0 grow overflow-y-auto", className)}
-          scrollbarClassName="mr-[1.5px]"
+          rootClassName={cn(
+            "h-0 min-w-0 grow overflow-y-auto print:h-auto print:overflow-visible",
+            className,
+          )}
+          scrollbarClassName="mr-[1.5px] print:hidden"
           viewportClassName="p-5"
           ref={scrollerRef}
         >
@@ -476,7 +480,7 @@ const ContainerToc: FC = memo(() => {
 
   return (
     <RootPortal to={wrappedElement!}>
-      <div className="group absolute right-[-130px] top-0 h-full w-[100px]">
+      <div className="group absolute right-[-130px] top-0 h-full w-[100px]" data-hide-in-print>
         <div className="sticky top-0">
           <Toc
             onItemClick={() => {

apps/renderer/src/modules/feed-column/index.tsx

@@ -143,6 +143,7 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
 
   return (
     <WindowUnderBlur
+      data-hide-in-print
       className={cn(
         "relative flex h-full flex-col space-y-3 pt-2.5",
 

apps/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx

@@ -43,6 +43,7 @@ export function Component() {
     <div ref={containerRef} className="relative flex min-w-0 grow">
       <div
         className={cn("h-full shrink-0", inWideMode ? "flex-1" : "border-r", "will-change-[width]")}
+        data-hide-in-print
         style={{
           width: position,
         }}

apps/renderer/src/pages/(main)/layout.tsx

@@ -214,7 +214,7 @@ const RootContainer = forwardRef<HTMLDivElement, PropsWithChildren>(({ children
           "--fo-feed-col-w": `${feedColWidth}px`,
         } as any
       }
-      className="relative z-0 flex h-screen overflow-hidden"
+      className="relative z-0 flex h-screen overflow-hidden print:h-auto print:overflow-auto"
       onContextMenu={preventDefault}
     >
       {children}
@@ -304,6 +304,7 @@ const FeedResponsiveResizerContainer = ({
   return (
     <>
       <div
+        data-hide-in-print
         className={cn(
           "shrink-0 overflow-hidden",
           "absolute inset-y-0 z-[2]",
@@ -321,6 +322,7 @@ const FeedResponsiveResizerContainer = ({
       </div>
 
       <div
+        data-hide-in-print
         className={!isDragging ? "duration-200" : ""}
         style={{
           width: feedColumnShow ? `${position}px` : 0,