From a7e9356c16469ff75d2a162e2923edaac81c65e2 Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Tue, 13 Jun 2023 03:04:09 +0800
Subject: [PATCH] fixup: #1762 optimize style on mobile screen

---
 app/components/chat.module.scss |  3 +++
 app/components/chat.tsx         | 31 ++++++++++++++++++-------------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index 3a8d3cda4ae..644c917a1f4 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -18,6 +18,7 @@
     margin-bottom: 10px;
     align-items: center;
     height: 16px;
+    width: var(--icon-width);
 
     &:not(:last-child) {
       margin-right: 5px;
@@ -34,6 +35,8 @@
     }
 
     &:hover {
+      width: var(--full-width);
+
       .text {
         opacity: 1;
         transform: translate(0);
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 15784861eae..ffd2b7d293d 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1,5 +1,5 @@
 import { useDebouncedCallback } from "use-debounce";
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
@@ -286,34 +286,39 @@ function ChatAction(props: {
 }) {
   const iconRef = useRef<HTMLDivElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
-  const [hovering, setHovering] = useState(false);
-  const [width, setWidth] = useState(20);
+  const [width, setWidth] = useState({
+    full: 20,
+    icon: 20,
+  });
 
-  const updateWidth = () => {
+  function updateWidth() {
     if (!iconRef.current || !textRef.current) return;
     const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
     const textWidth = getWidth(textRef.current);
     const iconWidth = getWidth(iconRef.current);
-    setWidth(hovering ? textWidth + iconWidth : iconWidth);
-  };
+    setWidth({
+      full: textWidth + iconWidth,
+      icon: iconWidth,
+    });
+  }
 
   useEffect(() => {
     updateWidth();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hovering]);
+  }, []);
 
   return (
     <div
       className={`${chatStyle["chat-input-action"]} clickable`}
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
-      style={{
-        width,
-      }}
       onClick={() => {
         props.onClick();
         setTimeout(updateWidth, 1);
       }}
+      style={
+        {
+          "--icon-width": `${width.icon}px`,
+          "--full-width": `${width.full}px`,
+        } as React.CSSProperties
+      }
     >
       <div ref={iconRef} className={chatStyle["icon"]}>
         {props.icon}