fix: entry title truncate

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 2, 2024 · 685ce3c · 685ce3c
1 parent 0ff10c6
commit 685ce3c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/apps/renderer/src/modules/app-layout/subview/index.mobile.tsx b/apps/renderer/src/modules/app-layout/subview/index.mobile.tsx
@@ -12,7 +12,9 @@ export const SubviewLayout = () => {
   const scrollYProgress = useScroll()
 
   const opacity = useTransform(scrollYProgress.scrollY, [0, 120], [0, 1], { ease: easeOut })
-  const borderOpacity = useTransform(scrollYProgress.scrollY, [50, 120], [0, 1], { ease: easeOut })
+  const borderOpacity = useTransform(scrollYProgress.scrollY, [50, 120], [0, 0.5], {
+    ease: easeOut,
+  })
 
   return (
     <>
@@ -22,7 +24,7 @@ export const SubviewLayout = () => {
         className={cn(
           "sticky inset-x-0 top-0 z-10 p-4",
           "grid grid-cols-[1fr_auto_1fr] items-center gap-4",
-          "bg-zinc-50/80 backdrop-blur-xl dark:bg-neutral-900/90",
+          "bg-theme-background",
           "border-b",
         )}
         style={{

diff --git a/apps/renderer/src/modules/discover/recommendations.tsx b/apps/renderer/src/modules/discover/recommendations.tsx
@@ -152,7 +152,7 @@ export function Recommendations({
 
       <div
         className={cn(
-          "z-[9] my-3 flex w-full flex-col items-end gap-4 bg-theme-background sm:flex-row sm:items-center",
+          "z-[9] my-3 flex w-full flex-col items-end gap-4 sm:flex-row sm:items-center",
           headerClassName,
         )}
       >

diff --git a/apps/renderer/src/modules/entry-content/header.desktop.tsx b/apps/renderer/src/modules/entry-content/header.desktop.tsx
@@ -117,9 +117,11 @@ function EntryHeaderImpl({ view, entryId, className, compact }: EntryHeaderProps
                 exit={{ opacity: 0.01, y: 30 }}
                 className="flex min-w-0 shrink items-end gap-2 truncate text-sm leading-tight text-theme-foreground"
               >
-                <span className="min-w-0 shrink truncate font-bold">{entryTitleMeta.title}</span>
+                <span className="min-w-[50%] shrink truncate font-bold">
+                  {entryTitleMeta.title}
+                </span>
                 <i className="i-mgc-line-cute-re size-[10px] shrink-0 translate-y-[-3px] rotate-[-25deg]" />
-                <span className="shrink-0 truncate text-xs opacity-80">
+                <span className="shrink truncate text-xs opacity-80">
                   {entryTitleMeta.description}
                 </span>
               </m.div>

diff --git a/apps/renderer/src/modules/entry-content/header.mobile.tsx b/apps/renderer/src/modules/entry-content/header.mobile.tsx
@@ -62,10 +62,12 @@ function EntryHeaderImpl({ view, entryId, className }: EntryHeaderProps) {
               className="pointer-events-auto flex w-full min-w-0 shrink gap-2 truncate px-1.5 pl-10 text-sm leading-tight text-theme-foreground duration-200"
             >
               <div className="flex min-w-0 grow items-center">
-                <div className="flex min-w-0 shrink items-end gap-1">
-                  <span className="min-w-0 shrink truncate font-bold">{entryTitleMeta.title}</span>
+                <div className="flex min-w-0 shrink items-end gap-1 truncate">
+                  <span className="min-w-[50%] shrink truncate font-bold">
+                    {entryTitleMeta.title}
+                  </span>
                   <i className="i-mgc-line-cute-re size-[10px] shrink-0 translate-y-[-3px] rotate-[-25deg]" />
-                  <span className="shrink-0 truncate text-xs opacity-80">
+                  <span className="shrink truncate text-xs opacity-80">
                     {entryTitleMeta.description}
                   </span>
                 </div>