I'm trying to create a personalized email inbox with Next.js where you can add attachments and send emails to various users. However, I try to hover over the FaPlus icon when I touch it, it's not responsive.

"use client"; // Ensure this is a Next.js Client Component

import { faCaretDown, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; // ✅ Next.js router
import { io } from "socket.io-client";
import EmailCard from "./EmailCard";
import "../inbox/EmailCard.css"; // Ensure this file exists

// Connect to backend via Socket.io
const socket = io("http://localhost:5000");

export default function EmailList() {
  const [emails, setEmails] = useState([]); // State to store emails
  const router = useRouter(); // ✅ Next.js router for navigation

  // Listen for new emails via WebSocket
  useEffect(() => {
    socket.on("new_email", (newEmail) => {
      setEmails((prevEmails) => [newEmail, ...prevEmails]);
    });

    return () => {
      socket.off("new_email");
    };
  }, []);

  // Navigate to the Compose Email page
  const handleComposeClick = () => {
    router.push("/compose");
  };

  return (
    <div className="flex flex-col bg-dark-500 w-6/12 mr-1 px-0 h-full">
      {/* Inbox Header */}
      <div className="flex items-center py-6 px-10">
        <span className="font-light text-xl text-light-200">Inbox</span>
        
        {/* Unread Email Counter */}
        <div className="ml-10 w-6 h-6 rounded-full bg-gradient-to-br from-blue-200 to-blue-300 flex items-center justify-center text-sm font-semibold text-dark-900">
          {emails.length}
        </div>

        {/* Compose Button */}
        <button
          onClick={handleComposeClick}
          className="bg-gradient-to-br from-blue-500 to-blue-700 text-white p-3 rounded-xl ml-auto cursor-pointer hover:scale-105 transition-transform duration-200 shadow-lg"
        >
          <FontAwesomeIcon icon={faPlus} className="text-xl" />
        </button>
      </div>

      {/* Recent Emails Header */}
      <div className="px-10 pb-5">
        <span className="text-xs text-light-200">Recent</span>
        <FontAwesomeIcon icon={faCaretDown} className="text-light-200 text-xs ml-2" />
      </div>

      {/* Email List */}
      <div className="flex flex-col px-10 pb-10 overflow-y-auto">
        {emails.length > 0 ? (
          emails.map((email, index) => (
            <EmailCard key={email.id || index} {...email} />
          ))
        ) : (
          <p className="text-light-200 text-center">No emails found.</p>
        )}
      </div>
    </div>
  );
}

This is a plus icon where when you touch it it redirects you to the email template composing page and there you can write your email. I plan it to be with Nodemailer. But I can solve the icon issue. Can you help me make it responsive?