From 26625927ff81a4eaf7dfac5ea985d59a77eb1845 Mon Sep 17 00:00:00 2001
From: Douglas Lai <115660088+Douglasymlai@users.noreply.github.com>
Date: Mon, 2 Mar 2026 16:07:19 +0000
Subject: [PATCH] css bug fix (#1413)

---
 src/components/ChatBox/index.tsx | 34 ++++++++++++++++----------------
 src/components/TopBar/index.tsx  | 25 +++++++++++------------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/ChatBox/index.tsx b/src/components/ChatBox/index.tsx
index 677a7255..5adcf7c1 100644
--- a/src/components/ChatBox/index.tsx
+++ b/src/components/ChatBox/index.tsx
@@ -976,7 +976,7 @@ export default function ChatBox(): JSX.Element {
   }
 
   return (
-    <div className="h-full w-full flex-none items-center justify-center overflow-hidden rounded-2xl border-solid border-border-tertiary bg-surface-secondary">
+    <div className="rounded-2xl border-border-tertiary bg-surface-secondary h-full w-full flex-none items-center justify-center overflow-hidden border-solid">
       {/* Unified ChatBox Structure */}
       <div className="relative flex h-full w-full flex-col overflow-hidden">
         {/* Header Box - Always visible */}
@@ -993,10 +993,10 @@ export default function ChatBox(): JSX.Element {
         <div className="relative flex flex-1 flex-col overflow-hidden">
           {/* Project Chat Container - Show when has messages (absolute, full height) */}
           <div
-            className={`absolute inset-0 flex h-full flex-col transition-all duration-300 ease-in-out ${
+            className={`inset-0 ease-in-out absolute flex h-full flex-col transition-all duration-300 ${
               hasAnyMessages
-                ? 'pointer-events-auto translate-y-0 opacity-100'
-                : 'pointer-events-none -translate-y-4 opacity-0'
+                ? 'translate-y-0 pointer-events-auto opacity-100'
+                : '-translate-y-4 pointer-events-none opacity-0'
             }`}
           >
             <ProjectChatContainer
@@ -1007,15 +1007,15 @@ export default function ChatBox(): JSX.Element {
 
           {/* Init State Container - Welcome + BottomBox + Suggestions (vertically centered) */}
           <div
-            className={`flex flex-1 flex-col transition-all duration-300 ease-in-out ${
+            className={`ease-in-out flex flex-1 flex-col transition-all duration-300 ${
               hasAnyMessages
-                ? 'pointer-events-none absolute inset-0 opacity-0'
+                ? 'inset-0 pointer-events-none absolute opacity-0'
                 : 'pointer-events-auto opacity-100'
             }`}
           >
             {/* Welcome Message - Top area, flex-1 to push content down */}
-            <div className="flex flex-1 flex-col items-center justify-end gap-1 pb-4">
-              <div className="text-center text-body-lg font-bold text-text-heading">
+            <div className="gap-1 pb-4 flex flex-1 flex-col items-center justify-end">
+              <div className="text-body-lg font-bold text-text-heading text-center">
                 {t('layout.welcome-to-eigent')}
               </div>
             </div>
@@ -1054,24 +1054,24 @@ export default function ChatBox(): JSX.Element {
             )}
 
             {/* Suggestion Area - Bottom area, flex-1 to push content up */}
-            <div className="mt-3 flex h-[210px] items-start justify-center gap-2 pr-2">
+            <div className="mt-3 gap-2 flex h-[210px] flex-1 items-start justify-center">
               {!hasModel ? (
-                <div className="flex items-center gap-2">
+                <div className="gap-2 flex items-center">
                   <div
                     onClick={() => {
                       navigate('/history?tab=agents');
                     }}
-                    className="flex cursor-pointer items-center gap-2 rounded-md bg-surface-warning px-sm py-xs"
+                    className="gap-2 rounded-md bg-surface-warning px-sm py-xs flex cursor-pointer items-center"
                   >
                     <TriangleAlert size={20} className="text-icon-warning" />
-                    <span className="flex-1 text-xs font-medium leading-[20px] text-text-warning">
+                    <span className="text-xs font-medium text-text-warning flex-1 leading-[20px]">
                       {t('layout.please-select-model')}
                     </span>
                   </div>
                 </div>
               ) : null}
               {hasModel && !privacy ? (
-                <div className="flex items-center gap-2">
+                <div className="gap-2 flex items-center">
                   <div
                     onClick={(e) => {
                       const target = e.target as HTMLElement;
@@ -1093,13 +1093,13 @@ export default function ChatBox(): JSX.Element {
                       proxyFetchPut('/api/user/privacy', requestData);
                       setPrivacy(true);
                     }}
-                    className="flex cursor-pointer items-center gap-1 rounded-md bg-surface-information px-sm py-xs"
+                    className="gap-1 rounded-md bg-surface-information px-sm py-xs flex cursor-pointer items-center"
                   >
                     <TriangleAlert
                       size={20}
                       className="text-icon-information"
                     />
-                    <span className="flex-1 text-xs font-medium leading-[20px] text-text-information">
+                    <span className="text-xs font-medium text-text-information flex-1 leading-[20px]">
                       {t('layout.by-messaging-eigent')}{' '}
                       <a
                         href="https://www.eigent.ai/terms-of-use"
@@ -1125,7 +1125,7 @@ export default function ChatBox(): JSX.Element {
                   </div>
                 </div>
               ) : (
-                <div className="mr-2 flex flex-col items-center gap-2">
+                <div className="mr-2 gap-2 flex flex-col items-center">
                   {[
                     {
                       label: t('layout.it-ticket-creation'),
@@ -1142,7 +1142,7 @@ export default function ChatBox(): JSX.Element {
                   ].map(({ label, message }) => (
                     <div
                       key={label}
-                      className="cursor-pointer rounded-md bg-surface-tertiary px-sm py-xs text-xs font-medium leading-none text-button-tertiery-text-default opacity-70 transition-all duration-300 hover:opacity-100"
+                      className="rounded-md bg-surface-tertiary px-sm py-xs text-xs font-medium text-button-tertiery-text-default cursor-pointer leading-none opacity-70 transition-all duration-300 hover:opacity-100"
                       onClick={() => {
                         setMessage(message);
                       }}
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index e4040f10..64dc2025 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -60,7 +60,6 @@ function HeaderWin() {
   const { chatStore, projectStore } = useChatStoreAdapter();
   const { toggle } = useSidebarStore();
   const { chatPanelPosition, setChatPanelPosition } = usePageTabStore();
-  const [isFullscreen, setIsFullscreen] = useState(false);
   const appearance = useAuthStore((state) => state.appearance);
   const [endDialogOpen, setEndDialogOpen] = useState(false);
   const [endProjectLoading, setEndProjectLoading] = useState(false);
@@ -205,7 +204,7 @@ function HeaderWin() {
 
   return (
     <div
-      className={`drag absolute left-0 right-0 top-0 z-50 flex !h-9 items-center justify-between py-1 ${
+      className={`drag left-0 right-0 top-0 !h-9 py-1 absolute z-50 flex items-center justify-between ${
         platform === 'darwin' ? 'pl-20' : 'pl-2'
       }`}
       id="titlebar"
@@ -214,7 +213,7 @@ function HeaderWin() {
       {/* left */}
       <div
         className={`${
-          platform === 'darwin' && isFullscreen ? 'w-0' : 'w-[70px]'
+          platform === 'darwin' ? 'w-0' : 'w-[70px]'
         } no-drag flex items-center justify-center`}
       >
         {platform !== 'darwin' && (
@@ -225,7 +224,7 @@ function HeaderWin() {
       </div>
 
       {/* center */}
-      <div className="drag flex h-full flex-1 items-center justify-between pr-2">
+      <div className="drag pr-2 flex h-full flex-1 items-center justify-between">
         <div className="relative z-50 flex h-full items-center">
           {location.pathname === '/history' && (
             <div className="mr-1 flex items-center">
@@ -286,7 +285,7 @@ function HeaderWin() {
                     onClick={toggle}
                     size="sm"
                   >
-                    <span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
+                    <span className="inline-block max-w-[300px] overflow-hidden align-middle text-ellipsis whitespace-nowrap">
                       {t('layout.new-project')}
                     </span>
                     <ChevronDown />
@@ -305,7 +304,7 @@ function HeaderWin() {
                     className="no-drag text-base font-bold"
                     onClick={toggle}
                   >
-                    <span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
+                    <span className="inline-block max-w-[300px] overflow-hidden align-middle text-ellipsis whitespace-nowrap">
                       {activeTaskTitle}
                     </span>
                     <ChevronDown />
@@ -321,7 +320,7 @@ function HeaderWin() {
           <div
             className={`${
               platform === 'darwin' && 'pr-2'
-            } no-drag relative z-50 flex h-full items-center gap-1`}
+            } no-drag gap-1 relative z-50 flex h-full items-center`}
           >
             {chatStore.activeTaskId &&
               chatStore.tasks[chatStore.activeTaskId as string] &&
@@ -340,7 +339,7 @@ function HeaderWin() {
                     onClick={() => setEndDialogOpen(true)}
                     variant="ghost"
                     size="xs"
-                    className="no-drag justify-center rounded-full bg-surface-cuation !text-text-cuation"
+                    className="no-drag bg-surface-cuation !text-text-cuation justify-center rounded-full"
                   >
                     <Power />
                     {t('layout.end-project')}
@@ -361,7 +360,7 @@ function HeaderWin() {
                     }
                     variant="ghost"
                     size="xs"
-                    className="no-drag bg-button-fill-information !text-button-fill-information-foreground"
+                    className="no-drag bg-surface-information !text-text-information rounded-full"
                   >
                     {t('layout.share')}
                   </Button>
@@ -422,7 +421,7 @@ function HeaderWin() {
           <div
             className={`${
               platform === 'darwin' && 'pr-2'
-            } no-drag relative z-50 flex h-full items-center gap-1`}
+            } no-drag gap-1 relative z-50 flex h-full items-center`}
           ></div>
         )}
       </div>
@@ -434,19 +433,19 @@ function HeaderWin() {
           ref={controlsRef}
         >
           <div
-            className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
+            className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => window.electronAPI.minimizeWindow()}
           >
             <Minus className="h-4 w-4" />
           </div>
           <div
-            className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
+            className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => window.electronAPI.toggleMaximizeWindow()}
           >
             <Square className="h-4 w-4" />
           </div>
           <div
-            className="flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center leading-5 hover:bg-surface-hover-subtle"
+            className="leading-5 hover:bg-surface-hover-subtle flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => window.electronAPI.closeWindow()}
           >
             <X className="h-4 w-4" />