style(responsive): finish responsive token migration

src/app/_components/core/settings-section.module.css

@@ -55,8 +55,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--responsive-icon-size-md, 24px);
+  height: var(--responsive-icon-size-md, 24px);
   color: var(--color-chevron-icon, #000000);
   flex-shrink: 0;
 }

src/app/_components/user-message-avatar.tsx

@@ -7,7 +7,7 @@ import styles from "./user-message-avatar.module.css";
 export interface UserMessageAvatarProps {
   avatarUrl?: string | null;
   className?: string;
-  size?: number;
+  size?: number | string;
 }
 
 export function UserMessageAvatar({
@@ -17,6 +17,7 @@ export function UserMessageAvatar({
 }: UserMessageAvatarProps) {
   const avatarClassName = [styles.avatar, className].filter(Boolean).join(" ");
   const avatarStyle = { width: size, height: size };
+  const imageSize = typeof size === "number" ? size : 64;
 
   if (avatarUrl && avatarUrl.length > 0) {
     return (
@@ -25,7 +26,7 @@ export function UserMessageAvatar({
         style={avatarStyle}
         aria-label="User avatar"
       >
-        <Image src={avatarUrl} alt="" width={size} height={size} />
+        <Image src={avatarUrl} alt="" width={imageSize} height={imageSize} />
       </div>
     );
   }
@@ -39,8 +40,8 @@ export function UserMessageAvatar({
       <Image
         src="/images/chat/pic-chat-guest.png"
         alt="Guest"
-        width={size}
-        height={size}
+        width={imageSize}
+        height={imageSize}
       />
     </div>
   );