Fix overflow bug with to long user name and mail (#34)

src/components/dashboard/sidebar/profile-button.tsx

@@ -1,11 +1,12 @@
-import useUserProfile from "@/utils/api/use-user-profile";
-import useTranslation from "next-translate/useTranslation";
-import { useMemo } from "react";
 import { Button, Dropdown } from "react-daisyui";
-import Link from "next/link";
 import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
+
 import { Database } from "@/types/supabase-types";
+import Link from "next/link";
+import { useMemo } from "react";
 import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import useUserProfile from "@/utils/api/use-user-profile";
 
 type Props = {
   className?: string;
@@ -24,11 +25,11 @@ const DashboardProfileButton = ({ className }: Props) => {
   return (
     <div className={className}>
       <Dropdown vertical="top" horizontal="center">
-        <Button color="ghost">{menuButtonText}</Button>
+        <Button color="ghost" className="break-all">{menuButtonText}</Button>
         <Dropdown.Menu className="w-52">
           <div className="border-b border-base-300 p-3 mb-1">
             <p className="text-sm">{t("profileButton.loggedInAs")}</p>
-            <p className="font-bold">{user?.email}</p>
+            <p className="font-bold break-all">{user?.email}</p>
           </div>
           <Link href="/dashboard/profile" legacyBehavior>
             <Dropdown.Item>{t("profileButton.editProfile")}</Dropdown.Item>