chore: update frontend dependencies and reorder Tailwind CSS classes for consistency. (#581)

## 📝 Pull Request Template

### 1. Related Issue
Closes # (issue number)

### 2. Type of Change (select one)
Type of Change: Chore Update

### 3. Description
update frontend dependencies and reorder Tailwind CSS classes for
consistency.

### 4. Testing
- [x] I have tested this locally.
- [x] I have updated or added relevant tests.

### 5. Checklist
- [x] I have read the [Code of Conduct](./CODE_OF_CONDUCT.md)
- [x] I have followed the [Contributing Guidelines](./CONTRIBUTING.md)
- [x] My changes follow the project's coding style

Author: DigHuang

frontend/bun.lock

@@ -58,7 +58,7 @@
     "framer-motion": "^12.23.26",
     "i18next": "^25.7.2",
     "isbot": "5.1.31",
-    "lucide-react": "^0.559.0",
+    "lucide-react": "^0.561.0",
     "mutative": "^1.3.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",
@@ -74,7 +74,7 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.8",
+    "@biomejs/biome": "^2.3.9",
     "@react-router/dev": "^7.10.1",
     "@react-router/serve": "^7.10.1",
     "@tailwindcss/typography": "^0.5.19",
@@ -88,7 +88,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.1.12",
     "vite-plugin-svg-sprite": "^0.6.3",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^6.0.2"
   },
   "overrides": {
     "vite": "npm:rolldown-vite@latest",

frontend/package.json

@@ -41,7 +41,7 @@ const ChatWelcomeScreen: FC<ChatWelcomeScreenProps> = ({
 };
 
 const ChatBackground = () => (
-  <div className="-z-10 absolute inset-0 overflow-hidden opacity-30">
+  <div className="absolute inset-0 -z-10 overflow-hidden opacity-30">
     {[
       {
         left: "12%",
@@ -76,7 +76,7 @@ const ChatBackground = () => (
     ].map((blur) => (
       <div
         key={`blur-${blur.left}-${blur.colors}`}
-        className={`-translate-x-1/2 -translate-y-1/2 absolute ${blur.size}`}
+        className={`absolute -translate-x-1/2 -translate-y-1/2 ${blur.size}`}
         style={{ left: blur.left, top: blur.top }}
       >
         <div

frontend/src/app/agent/components/chat-conversation/chat-welcome-screen.tsx

@@ -99,7 +99,7 @@ function AgentSuggestionItem({
               {suggestion.avatars.map((avatar, index) => (
                 <div
                   key={`${suggestion.id}-avatar-${index}`}
-                  className="-mr-2 relative size-6 overflow-hidden rounded-full border-2 border-white last:mr-0"
+                  className="relative -mr-2 size-6 overflow-hidden rounded-full border-2 border-white last:mr-0"
                 >
                   {avatar}
                 </div>

frontend/src/app/home/components/agent-suggestions-list.tsx

@@ -151,7 +151,7 @@ export default function LoginModal({ children }: LoginModalProps) {
             disabled={pendingAction !== null}
           >
             <svg
-              className="-translate-y-1/2 absolute top-1/2 left-4"
+              className="absolute top-1/2 left-4 -translate-y-1/2"
               width="16"
               height="16"
               viewBox="0 0 16 16"
@@ -176,7 +176,7 @@ export default function LoginModal({ children }: LoginModalProps) {
             </svg>
             Continue with Google
             {pendingAction === "gmail" && (
-              <Spinner className="-translate-y-1/2 absolute top-1/2 right-4" />
+              <Spinner className="absolute top-1/2 right-4 -translate-y-1/2" />
             )}
           </Button>
           {/*