feat: add smooth chevron rotation animation

- Replace inline styles with Tailwind CSS classes for better maintainability
- Add smooth 200ms transition when expanding/collapsing
- Chevron rotates from right (→) to up (↑) matching the content position above
- Consistent with other components like ApiConfigSelector

Author: daniel-lxs

webview-ui/src/components/chat/AutoApproveMenu.tsx

@@ -234,11 +234,9 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						{displayText}
 					</span>
 					<span
-						className={`codicon codicon-chevron-${isExpanded ? "up" : "right"}`}
-						style={{
-							flexShrink: 0,
-							marginLeft: isExpanded ? "2px" : "-2px",
-						}}
+						className={`codicon codicon-chevron-right flex-shrink-0 transition-transform duration-200 ease-in-out ${
+							isExpanded ? "-rotate-90 ml-[2px]" : "rotate-0 -ml-[2px]"
+						}`}
 					/>
 				</div>
 			</div>