fix(mobile): cannot change tag color (#11708)

fix AF-2402

packages/frontend/core/src/components/tags/tag-edit-menu.css.ts

@@ -47,6 +47,12 @@ export const mobileTagEditDeleteRow = style({
   color: cssVarV2('button/error'),
 });
 
+export const mobileTagEditTrigger = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
 export const spacer = style({
   flex: 1,
 });

packages/frontend/core/src/components/tags/tag-edit-menu.tsx

@@ -131,8 +131,10 @@ const MobileTagEditMenu = ({
   const [localTag, setLocalTag] = useState({ ...tag });
 
   useEffect(() => {
-    setLocalTag({ ...tag });
+    if (localTag.value !== tag.value) {
-  }, [tag]);
+      setLocalTag({ ...tag });
+    }
+  }, [tag, localTag.value]);
 
   const handleTriggerClick: MouseEventHandler<HTMLDivElement> = useCallback(
     e => {
@@ -210,7 +212,9 @@ const MobileTagEditMenu = ({
           </ConfigModal.Row>
         </ConfigModal.RowGroup>
       </ConfigModal>
-      <div onClick={handleTriggerClick}>{children}</div>
+      <div onClick={handleTriggerClick} className={styles.mobileTagEditTrigger}>
+        {children}
+      </div>
     </>
   );
 };