fix(timeline): adjust layout for AIEnhancedTimeline to ensure minimum width

- Updated the AIEnhancedTimelineLayout component to set a minimum width of 300px for better layout consistency.
- Enhanced the flex properties to improve responsiveness and visual structure.

Signed-off-by: Innei <[email protected]>

Author: Innei

apps/desktop/layer/renderer/src/modules/app-layout/ai-enhanced-timeline/AIEnhancedTimelineLayout.tsx

@@ -119,7 +119,12 @@ const AIEnhancedTimelineLayoutImpl = () => {
   const showCompactTimelineColumn = useGeneralSettingKey("showCompactTimelineInSub")
   return (
     <div className="relative flex min-w-0 grow">
-      <div className={cn("h-full flex-1", aiPanelStyle === AIChatPanelStyle.Fixed && "border-r")}>
+      <div
+        className={cn(
+          "h-full min-w-[300px] flex-1",
+          aiPanelStyle === AIChatPanelStyle.Fixed && "border-r",
+        )}
+      >
         <AppLayoutGridContainerProvider>
           <div className="relative h-full">
             {/* Entry list - always rendered to prevent animation */}

apps/desktop/layer/renderer/src/modules/entry-content/actions/more-actions.tsx

@@ -26,15 +26,15 @@ import type { FollowCommandId } from "~/modules/command/types"
 export const MoreActions = ({
   entryId,
   view,
-
+  showMainAction = false,
   hideCustomizeToolbar = false,
 }: {
   entryId: string
   view: FeedViewType
-
+  showMainAction?: boolean
   hideCustomizeToolbar?: boolean
 }) => {
-  const { moreAction } = useSortedEntryActions({ entryId, view })
+  const { moreAction, mainAction } = useSortedEntryActions({ entryId, view })
 
   const actionConfigs = useMemo(
     () =>
@@ -81,7 +81,25 @@ export const MoreActions = ({
         <ActionButton icon={<i className="i-mingcute-more-1-fill" />} />
       </DropdownMenuTrigger>
       <RootPortal>
-        <DropdownMenuContent>
+        <DropdownMenuContent align="end">
+          {showMainAction && (
+            <div>
+              {mainAction
+                .filter((config) => config instanceof MenuItemText)
+                .map((config) => {
+                  return (
+                    <CommandDropdownMenuItem
+                      key={config.id}
+                      commandId={config.id}
+                      onClick={config.onClick!}
+                      active={config.active}
+                    />
+                  )
+                })}
+              <DropdownMenuSeparator />
+            </div>
+          )}
+
           {availableActions.map((config) => {
             // Handle EntryActionI with sub-menu
             if (config instanceof EntryActionDropdownItem && config.hasChildren) {

apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/AIEntryHeader.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react"
+import { memo, useLayoutEffect, useRef, useState } from "react"
 
 import { useEntryContentScrollToTop } from "../../atoms"
 import { EntryHeaderRoot } from "./internal/context"
@@ -8,16 +8,32 @@ import type { EntryHeaderProps } from "./types"
 
 function EntryHeaderImpl({ entryId, className, compact }: EntryHeaderProps) {
   const isAtTop = useEntryContentScrollToTop()
+  const headerRef = useRef<HTMLDivElement>(null)
+  const [isSmallWidth, setIsSmallWidth] = useState(false)
+  useLayoutEffect(() => {
+    const $header = headerRef.current
+    if (!$header) return
+    const handler = () => setIsSmallWidth($header.clientWidth <= 500)
+
+    const observer = new ResizeObserver(handler)
+    observer.observe($header)
+    handler()
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [headerRef])
   return (
     <EntryHeaderRoot entryId={entryId} className={className} compact={compact}>
-      <div
-        className="bg-background h-top-header relative z-10 flex w-full items-center justify-between gap-3 px-4"
+      <nav
+        className="bg-background @container h-top-header relative z-10 flex w-full items-center justify-between gap-3 px-4"
         data-at-top={isAtTop}
         data-hide-in-print
+        ref={headerRef}
       >
         <EntryHeaderBreadcrumb />
-        <EntryHeaderActionsContainer />
-      </div>
+        <EntryHeaderActionsContainer isSmallWidth={isSmallWidth} />
+      </nav>
     </EntryHeaderRoot>
   )
 }

apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/internal/EntryHeaderActionsContainer.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import { memo } from "react"
 
 import { useRouteParams } from "~/hooks/biz/useRouteParams"
@@ -6,14 +7,14 @@ import { EntryHeaderActions } from "../../../actions/header-actions"
 import { MoreActions } from "../../../actions/more-actions"
 import { useEntryHeaderContext } from "./context"
 
-function EntryHeaderActionsContainerImpl() {
+function EntryHeaderActionsContainerImpl({ isSmallWidth }: { isSmallWidth: boolean }) {
   const { entryId } = useEntryHeaderContext()
   const { view } = useRouteParams()
 
   return (
-    <div className="relative flex shrink-0 items-center justify-end gap-2">
-      <EntryHeaderActions entryId={entryId} view={view} />
-      <MoreActions entryId={entryId} view={view} />
+    <div className={clsx("relative flex shrink-0 items-center justify-end gap-2")}>
+      {!isSmallWidth && <EntryHeaderActions entryId={entryId} view={view} />}
+      <MoreActions entryId={entryId} view={view} showMainAction={isSmallWidth} />
     </div>
   )
 }

apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/internal/EntryHeaderBreadcrumb.tsx

@@ -246,7 +246,7 @@ export function EntryHeaderBreadcrumb() {
             <i className="i-mingcute-close-line size-5" />
           </button>
           {viewName && (
-            <div className="flex items-center">
+            <div className="@[700px]:flex hidden items-center">
               <button
                 type="button"
                 className={cn(
@@ -262,8 +262,8 @@ export function EntryHeaderBreadcrumb() {
           )}
           {meta && (
             <>
-              {Slash}
-              <div className="flex items-center">
+              <span className="@[700px]:inline hidden">{Slash}</span>
+              <div className="@[700px]:flex hidden min-w-[120px] shrink items-center">
                 <button
                   type="button"
                   className={cn(
@@ -284,9 +284,9 @@ export function EntryHeaderBreadcrumb() {
 
               {!!meta.entryTitle && (
                 <>
-                  {Slash}
+                  <span className="@[700px]:inline hidden shrink-0">{Slash}</span>
                   <span
-                    className="text-text truncate px-1.5 py-0.5 text-sm"
+                    className="text-text min-w-0 max-w-[30vw] truncate px-1.5 py-0.5 text-sm"
                     title={meta.entryTitle}
                   >
                     {meta.entryTitle}