fix: safari entry colmun styles

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

Author: Innei

src/renderer/src/atoms/settings/ui.ts

@@ -4,7 +4,7 @@ import { createSettingAtom } from "./helper"
 
 const createDefaultSettings = (): UISettings => ({
   // Sidebar
-  entryColWidth: 340,
+  entryColWidth: 356,
   feedColWidth: 256,
 
   opaqueSidebar: false,

src/renderer/src/lib/utils.ts

@@ -62,6 +62,12 @@ export const getOS = memoize((): OS => {
   return os as OS
 })
 
+export const isSafari = memoize(() => {
+  if (ELECTRON) return false
+  const ua = window.navigator.userAgent
+  return ua.includes("Safari") && !ua.includes("Chrome")
+})
+
 // eslint-disable-next-line no-control-regex
 export const isASCII = (str) => /^[\u0000-\u007F]*$/.test(str)
 

src/renderer/src/modules/app/EnvironmentIndicator.tsx

@@ -6,21 +6,17 @@ import {
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
 
-export const EnvironmentIndicator = () => {
-  const show = !import.meta.env.PROD || globalThis["__DEBUG_PROXY__"]
-  if (!show) return null
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div className="fixed bottom-0 left-0 rounded-tr bg-theme-accent px-1 py-0.5 text-xs text-white">
-          {import.meta.env.MODE}
-        </div>
-      </TooltipTrigger>
-      <TooltipPortal>
-        <TooltipContent className="max-w-max break-all" side="top">
-          <pre>{JSON.stringify({ ...env }, null, 2)}</pre>
-        </TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
-  )
-}
+export const EnvironmentIndicator = () => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <div className="fixed bottom-0 left-0 rounded-tr bg-theme-accent px-1 py-0.5 text-xs text-white">
+        {import.meta.env.MODE}
+      </div>
+    </TooltipTrigger>
+    <TooltipPortal>
+      <TooltipContent className="max-w-max break-all" side="top">
+        <pre>{JSON.stringify({ ...env }, null, 2)}</pre>
+      </TooltipContent>
+    </TooltipPortal>
+  </Tooltip>
+)

src/renderer/src/modules/entry-column/article-item.tsx

@@ -23,7 +23,7 @@ export const ArticleItemSkeleton = (
     <div className="relative z-[1]">
       <div className="group relative flex py-4 pl-3 pr-2">
         <Skeleton className="mr-2 size-5 rounded-sm" />
-        <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
+        <div className="-mt-0.5 flex-1 text-sm leading-tight">
           <div className="flex gap-1 text-[10px] font-bold text-zinc-400 dark:text-neutral-500">
             <Skeleton className="h-3 w-24" />
             <span>·</span>

src/renderer/src/modules/entry-column/list-item-template.tsx

@@ -1,14 +1,11 @@
-import {
-  Player,
-  usePlayerAtomSelector,
-} from "@renderer/atoms/player"
+import { Player, usePlayerAtomSelector } from "@renderer/atoms/player"
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { RelativeTime } from "@renderer/components/ui/datetime"
 import { Media } from "@renderer/components/ui/media"
 import { FEED_COLLECTION_LIST } from "@renderer/constants"
 import { useAsRead } from "@renderer/hooks/biz/useAsRead"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
-import { cn } from "@renderer/lib/utils"
+import { cn, isSafari } from "@renderer/lib/utils"
 import { EntryTranslation } from "@renderer/modules/entry-column/translation"
 import { useEntry } from "@renderer/store/entry/hooks"
 import { useFeedById } from "@renderer/store/feed"
@@ -43,6 +40,7 @@ export function ListItem({
   const displayTime = inInCollection ?
     entry.collections?.createdAt :
     entry.entries.publishedAt
+  const envIsSafari = isSafari()
   return (
     <div
       className={cn(
@@ -52,7 +50,14 @@ export function ListItem({
       )}
     >
       {!withAudio && <FeedIcon feed={feed} fallback entry={entry.entries} />}
-      <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
+      <div
+        className={cn(
+          "-mt-0.5 flex-1 text-sm leading-tight",
+
+          // FIXME: Safari bug, not support line-clamp cross elements
+          !envIsSafari && "line-clamp-4",
+        )}
+      >
         <div
           className={cn(
             "flex gap-1 text-[10px] font-bold",
@@ -79,6 +84,7 @@ export function ListItem({
         >
           {entry.entries.title ? (
             <EntryTranslation
+              className={envIsSafari ? "line-clamp-2 break-all" : undefined}
               source={entry.entries.title}
               target={translation?.title}
             />
@@ -100,6 +106,7 @@ export function ListItem({
             )}
           >
             <EntryTranslation
+              className={envIsSafari ? "line-clamp-2 break-all" : undefined}
               source={entry.entries.description}
               target={translation?.description}
             />
@@ -115,7 +122,14 @@ export function ListItem({
             String(entry.entries?.attachments?.[0].duration_in_seconds ?? 0),
             10,
           )}
-          feedIcon={<FeedIcon feed={feed} entry={entry.entries} size={80} className="m-0" />}
+          feedIcon={(
+            <FeedIcon
+              feed={feed}
+              entry={entry.entries}
+              size={80}
+              className="m-0"
+            />
+          )}
         />
       )}
 
@@ -187,12 +201,10 @@ function AudioCover({
         >
           <i
             className={cn("size-6", {
-              "i-mingcute-pause-fill":
-                playStatus && playStatus === "playing",
+              "i-mingcute-pause-fill": playStatus && playStatus === "playing",
               "i-mingcute-loading-fill animate-spin":
                 playStatus && playStatus === "loading",
-              "i-mingcute-play-fill":
-                !playStatus || playStatus === "paused",
+              "i-mingcute-play-fill": !playStatus || playStatus === "paused",
             })}
           />
         </button>

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

@@ -2,7 +2,7 @@ import { getUISettings, setUISetting } from "@renderer/atoms/settings/ui"
 import { PanelSplitter } from "@renderer/components/ui/divider"
 import { views } from "@renderer/constants"
 import { useRouteParms } from "@renderer/hooks/biz/useRouteParams"
-import { cn } from "@renderer/lib/utils"
+import { cn, isSafari } from "@renderer/lib/utils"
 import { EntryColumn } from "@renderer/modules/entry-column"
 import { useMemo, useRef } from "react"
 import { useResizable } from "react-resizable-layout"
@@ -18,7 +18,8 @@ export function Component() {
   const inWideMode = view ? views[view].wideMode : false
   const { position, separatorProps } = useResizable({
     axis: "x",
-    min: 300,
+    // FIXME: Less than this width causes grid images to overflow on safari
+    min: isSafari() ? 356 : 300,
     max: 450,
     initial: entryColWidth,
     containerRef,

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

@@ -50,7 +50,7 @@ export function Component() {
           {ELECTRON && <AutoUpdater />}
 
           <NetworkStatusIndicator />
-          <EnvironmentIndicator />
+          {!import.meta.env.PROD && <EnvironmentIndicator />}
         </FeedColumn>
       </FeedResponsiveResizerContainer>
       <main

src/renderer/src/router.tsx

@@ -9,7 +9,7 @@ import { buildGlobRoutes } from "./lib/route-builder"
 const globTree = import.meta.glob("./pages/**/*.tsx")
 const tree = buildGlobRoutes(globTree)
 
-let routerCreator = window.electron ? createHashRouter : createBrowserRouter
+let routerCreator = window.electron || globalThis["__DEBUG_PROXY__"] ? createHashRouter : createBrowserRouter
 if (window.SENTRY_RELEASE) {
   routerCreator = wrapCreateBrowserRouter(routerCreator)
 }