From 19d92cf57e7e0e4741b1c8b4972543ba52289bd7 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Mon, 27 Oct 2025 20:41:56 +0800
Subject: [PATCH] fix: some element styling

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../ai-chat/components/layouts/ChatInput.tsx  |  2 +-
 .../components/layouts/ChatInterface.tsx      | 15 ++-----
 .../components/layouts/ChatMoreDropdown.tsx   |  3 +-
 .../components/layouts/WelcomeScreen.tsx      | 18 ++++----
 .../app-layout/subview/SubviewLayout.tsx      |  2 +-
 .../pages/(main)/(layer)/(ai)/ai/index.tsx    |  9 +++-
 .../src/ui/progressive-blur/index.tsx         | 42 ++++---------------
 7 files changed, 31 insertions(+), 60 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInput.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInput.tsx
index 49b4316ca..93befe1d9 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInput.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInput.tsx
@@ -152,7 +152,7 @@ export const ChatInput = memo(
     )
 
     return (
-      <div className={cn(chatInputVariants({ variant }))}>
+      <div data-testid="chat-input" className={cn(chatInputVariants({ variant }))}>
         {/* Input Area */}
         <div className="relative z-10 flex items-end" onContextMenu={stopPropagation}>
           <ScrollArea rootClassName="mr-14 flex-1 overflow-auto" viewportClassName="px-5 py-3.5">
diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
index 209b4af4d..0f21e1251 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatInterface.tsx
@@ -59,7 +59,7 @@ import { WelcomeScreen } from "./WelcomeScreen"
 const SCROLL_BOTTOM_THRESHOLD = 100
 
 const draftMessages = new Map<string, EditorState>()
-const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfaceProps) => {
+const ChatInterfaceContent = ({ centerInputOnEmpty }: ChatInterfaceProps) => {
   const hasMessages = useHasMessages()
   const status = useChatStatus()
   const chatActions = useChatActions()
@@ -343,16 +343,7 @@ const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfa
   const rateLimitExtraHeight = hasRateLimitError ? 40 : 0
 
   return (
-    <div
-      className="flex size-full flex-col @container"
-      style={
-        visualOffsetY
-          ? ({
-              transform: `translateY(${typeof visualOffsetY === "number" ? `${visualOffsetY}px` : visualOffsetY})`,
-            } as React.CSSProperties)
-          : undefined
-      }
-    >
+    <div className="flex size-full flex-col @container">
       <GlobalFileDropZone className="flex size-full flex-col @container">
         <div className="flex min-h-0 flex-1 flex-col" ref={scrollContainerParentRef}>
           <AnimatePresence>
@@ -424,6 +415,7 @@ const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfa
 
         <div
           ref={bottomPanelRef}
+          data-testid="chat-input-container"
           className={cn(
             "absolute z-10 mx-auto duration-500 ease-in-out",
             hasMessages && "inset-x-0 bottom-0 max-w-4xl px-4 pb-4",
@@ -496,7 +488,6 @@ const ChatInterfaceContent = ({ centerInputOnEmpty, visualOffsetY }: ChatInterfa
 
 interface ChatInterfaceProps {
   centerInputOnEmpty?: boolean
-  visualOffsetY?: string | number
 }
 export const ChatInterface = (props: ChatInterfaceProps) => (
   <ErrorBoundary fallback={AIErrorFallback}>
diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx
index 380f29530..26bb9024b 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatMoreDropdown.tsx
@@ -94,11 +94,10 @@ export const ChatMoreDropdown = ({
                   : "Switch to Fixed Panel"}
               </span>
             </DropdownMenuItem>
+            <DropdownMenuSeparator />
           </>
         )}
 
-        <DropdownMenuSeparator />
-
         <DropdownMenuItem onClick={() => settingModalPresent("ai")}>
           <i className="i-mgc-settings-1-cute-re mr-2 size-4" />
           <span>AI Settings</span>
diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
index 3d329f18e..04426e10b 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/WelcomeScreen.tsx
@@ -62,15 +62,17 @@ const DefaultWelcomeHeader = ({ description }: { description: string }) => (
     animate={{ opacity: 1, y: 0 }}
     className="space-y-6 text-center"
   >
-    <div className="center">
-      <AISpline />
-    </div>
-    <div className="flex flex-col gap-2">
-      <h1 className="flex items-center justify-center gap-2 text-2xl font-semibold text-text">
-        <Folo className="size-11" /> AI
-      </h1>
+    <div data-testid="welcome-screen-header">
+      <div className="center">
+        <AISpline />
+      </div>
+      <div className="flex flex-col gap-2">
+        <h1 className="flex items-center justify-center gap-2 text-2xl font-semibold text-text">
+          <Folo className="size-11" /> AI
+        </h1>
 
-      <p className="text-balance text-sm text-text-secondary">{description}</p>
+        <p className="text-balance text-sm text-text-secondary">{description}</p>
+      </div>
     </div>
   </m.div>
 )
diff --git a/apps/desktop/layer/renderer/src/modules/app-layout/subview/SubviewLayout.tsx b/apps/desktop/layer/renderer/src/modules/app-layout/subview/SubviewLayout.tsx
index 167952eea..ca5e4ac39 100644
--- a/apps/desktop/layer/renderer/src/modules/app-layout/subview/SubviewLayout.tsx
+++ b/apps/desktop/layer/renderer/src/modules/app-layout/subview/SubviewLayout.tsx
@@ -161,7 +161,7 @@ function SubviewLayoutInner() {
       {/* Enhanced Header with smooth transitions */}
       <div
         className={cn(
-          "absolute inset-x-0 top-0 z-10 transition-all duration-300 ease-out",
+          "absolute inset-x-0 top-0 z-10 overflow-hidden transition-all duration-300 ease-out",
           isHeaderElevated && isElectronWindows && "-top-5",
         )}
       >
diff --git a/apps/desktop/layer/renderer/src/pages/(main)/(layer)/(ai)/ai/index.tsx b/apps/desktop/layer/renderer/src/pages/(main)/(layer)/(ai)/ai/index.tsx
index 731c21b1e..1b85bbcc7 100644
--- a/apps/desktop/layer/renderer/src/pages/(main)/(layer)/(ai)/ai/index.tsx
+++ b/apps/desktop/layer/renderer/src/pages/(main)/(layer)/(ai)/ai/index.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@follow/utils"
+
 import { AIChatRoot } from "~/modules/ai-chat/components/layouts/AIChatRoot"
 import { ChatPageHeader } from "~/modules/ai-chat/components/layouts/ChatHeader"
 import { ChatInterface } from "~/modules/ai-chat/components/layouts/ChatInterface"
@@ -5,12 +7,15 @@ import { ChatInterface } from "~/modules/ai-chat/components/layouts/ChatInterfac
 export const Component = () => {
   return (
     <div
-      className="relative flex h-screen w-full flex-col"
+      className={cn(
+        "relative flex h-screen w-full flex-col",
+        "[&_[data-testid=chat-input-container]]:translate-y-32 [&_[data-testid=welcome-screen-header]]:-translate-y-24",
+      )}
       style={{ "--ai-chat-layout-width": "65rem" } as React.CSSProperties}
     >
       <AIChatRoot>
         <ChatPageHeader />
-        <ChatInterface centerInputOnEmpty visualOffsetY="clamp(-10vh, -8vh, -6vh)" />
+        <ChatInterface centerInputOnEmpty />
       </AIChatRoot>
     </div>
   )
diff --git a/packages/internal/components/src/ui/progressive-blur/index.tsx b/packages/internal/components/src/ui/progressive-blur/index.tsx
index d49573872..351a59470 100644
--- a/packages/internal/components/src/ui/progressive-blur/index.tsx
+++ b/packages/internal/components/src/ui/progressive-blur/index.tsx
@@ -44,27 +44,13 @@ export function LinearBlur({
         ...props.style,
       }}
     >
-      <div
-        style={{
-          position: "absolute",
-          zIndex: 0,
-          width: "100%",
-          height: "100%",
-        }}
-      >
+      <div className="absolute z-0 size-full">
         {/* Full blur at 100-falloffPercentage% */}
         {actualSteps > 1 && (
           <div
+            className="absolute inset-0 z-[2]"
             style={{
-              position: "absolute",
-              zIndex: 2,
-              inset: 0,
-              mask: `linear-gradient(
-                to ${oppositeSide[side]},
-                  rgba(0, 0, 0, 1) ${mainPercentage}%,
-                  rgba(0, 0, 0, 1) ${mainPercentage + step}%,
-                  rgba(0, 0, 0, 0) ${mainPercentage + step * 2}%
-                )`,
+              mask: `linear-gradient(to ${oppositeSide[side]}, rgba(0, 0, 0, 1) ${mainPercentage}%, rgba(0, 0, 0, 1) ${mainPercentage + step}%, rgba(0, 0, 0, 0) ${mainPercentage + step * 2}%)`,
               backdropFilter: getBackdropFilter(1),
               WebkitBackdropFilter: getBackdropFilter(1),
             }}
@@ -74,31 +60,19 @@ export function LinearBlur({
           Array.from({ length: actualSteps - 2 }).map((_, i) => (
             <div
               key={i}
+              className="absolute inset-0"
               style={{
-                position: "absolute",
                 zIndex: i + 2,
-                inset: 0,
-                mask: `linear-gradient(
-                    to ${oppositeSide[side]},
-                    rgba(0, 0, 0, 0) ${mainPercentage + i * step}%,
-                    rgba(0, 0, 0, 1) ${mainPercentage + (i + 1) * step}%,
-                    rgba(0, 0, 0, 1) ${mainPercentage + (i + 2) * step}%,
-                    rgba(0, 0, 0, 0) ${mainPercentage + (i + 3) * step}%
-                  )`,
+
+                mask: `linear-gradient(to ${oppositeSide[side]},rgba(0, 0, 0, 0) ${mainPercentage + i * step}%,rgba(0, 0, 0, 1) ${mainPercentage + (i + 1) * step}%,rgba(0, 0, 0, 1) ${mainPercentage + (i + 2) * step}%,rgba(0, 0, 0, 0) ${mainPercentage + (i + 3) * step}%)`,
                 backdropFilter: getBackdropFilter(i + 2),
                 WebkitBackdropFilter: getBackdropFilter(i + 2),
               }}
             />
           ))}
         <div
-          style={{
-            position: "absolute",
-            left: 0,
-            top: "-100%",
-            width: "100%",
-            height: "100%",
-            boxShadow: `0 0 60px ${tint}, 0 0 100px ${tint}`,
-          }}
+          className="absolute -top-full left-0 size-full"
+          style={{ boxShadow: `0 0 60px ${tint}, 0 0 100px ${tint}` }}
         />
       </div>
     </div>