fix: article render container responsive width

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 12, 2024 · cae7fa6 · cae7fa6
1 parent 4cde1ac
commit cae7fa6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/apps/renderer/src/modules/entry-content/index.desktop.tsx b/apps/renderer/src/modules/entry-content/index.desktop.tsx
@@ -173,7 +173,7 @@ export const EntryContent: Component<EntryContentProps> = ({
             <article
               data-testid="entry-render"
               onContextMenu={stopPropagation}
-              className="relative m-auto min-w-0 max-w-[550px] @3xl:max-w-[70ch] @7xl:max-w-[80ch]"
+              className="relative m-auto min-w-0 max-w-[550px] @[47.5rem]:max-w-[70ch] @7xl:max-w-[80ch]"
             >
               <EntryTitle entryId={entryId} compact={compact} />
 

diff --git a/apps/renderer/src/modules/entry-content/index.shared.tsx b/apps/renderer/src/modules/entry-content/index.shared.tsx
@@ -273,21 +273,26 @@ export const ContainerToc: FC = memo(() => {
             )}
           />
 
-          <BackTopIndicator />
+          <BackTopIndicator
+            className={
+              "@[700px]:-translate-x-4 @[800px]:-translate-x-8 @[900px]:translate-x-0 @[900px]:items-start"
+            }
+          />
         </div>
       </div>
     </RootPortal>
   )
 })
 
-const BackTopIndicator = memo(() => {
+const BackTopIndicator: Component = memo(({ className }) => {
   const [readPercent] = useReadPercent()
   const scrollElement = useScrollViewElement()
   return (
     <span
-      className={
-        "mt-2 flex grow flex-col px-2 font-sans text-sm text-gray-800 dark:text-neutral-300"
-      }
+      className={cn(
+        "mt-2 flex grow flex-col px-2 font-sans text-sm text-gray-800 dark:text-neutral-300",
+        className,
+      )}
     >
       <div className="flex items-center gap-2 tabular-nums">
         <IconOpacityTransition