fix: translation tooltip width

part of #811

apps/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx

@@ -248,6 +248,8 @@ const WideModeButton = () => {
         shortcut={shortcuts.layout.toggleWideMode.key}
         onClick={() => {
           setUISetting("wideMode", !isWideMode)
+          // TODO: Remove this after useMeasure can get bounds in time
+          window.dispatchEvent(new Event("resize"))
           window.posthog?.capture("Switch to Wide Mode", {
             wideMode: !isWideMode ? 1 : 0,
             click: 1,

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

@@ -65,7 +65,6 @@ export const EntryTranslation: Component<{
                   "shadow-modal rounded-xl border bg-background p-2",
                   "group-data-[side=top]:top-0",
                   "group-data-[side=bottom]:top-full",
-                  "max-w-[30ch]",
                 )}
                 viewportClassName="max-h-[12ch]"
               >

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

@@ -79,7 +79,11 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
       rel="noreferrer"
     >
       <div className={cn("select-text break-words font-bold", compact ? "text-2xl" : "text-3xl")}>
-        <EntryTranslation source={entry.entries.title} target={translation.data?.title} />
+        <EntryTranslation
+          source={entry.entries.title}
+          target={translation.data?.title}
+          useOverlay
+        />
       </div>
       <div className="mt-2 text-[13px] font-medium text-zinc-500">{getPreferredTitle(feed)}</div>
       <div className="flex items-center gap-2 text-[13px] text-zinc-500">

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

@@ -29,6 +29,8 @@ export function Component() {
     containerRef,
     onResizeEnd({ position }) {
       setUISetting("entryColWidth", position)
+      // TODO: Remove this after useMeasure can get bounds in time
+      window.dispatchEvent(new Event("resize"))
     },
   })