377 as a developer i want to make the app as bug free as possible css basics

src/app/page.tsx

@@ -58,7 +58,7 @@ function HomePage() {
               title={t("submitButtonDisabledHint")}
               disableHoverListener={uploadedFiles.length !== 0}
               placement="top"
-              className="w-[90%] max-w-full"
+              className="w-[90%] max-w-full min-w-[133.44px]"
             >
               <span className="flex justify-center w-full">
                 <Button

src/components/Dropzone.tsx

@@ -2,7 +2,7 @@
 import FileUploaded from "@/classe/File";
 import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
-import type { DropzoneState, ImageLoadEvent } from "@/types/types";
+import type { DropzoneState } from "@/types/types";
 import { CloudUpload } from "@mui/icons-material";
 import { Box, Button, Typography, useTheme } from "@mui/material";
 import React from "react";
@@ -28,7 +28,6 @@ interface DropzoneProps {
  */
 const Dropzone: React.FC<DropzoneProps> = ({
   dropzoneState,
-  setDropzoneState,
 }) => {
   const theme = useTheme();
   const { t: tHomePage } = useTranslation("homePage");
@@ -97,7 +96,7 @@ const Dropzone: React.FC<DropzoneProps> = ({
     const newFile = FileUploaded.newFile(
       { username: "user" },
       URL.createObjectURL(file),
-      file,
+      file
     );
 
     const detectedType = await FileUploaded.detectType(newFile.getInfo().path);
@@ -108,34 +107,6 @@ const Dropzone: React.FC<DropzoneProps> = ({
     }
   }
 
-  /**
-   * Handles the image load event and updates the dropzone state based on the image width.
-   */
-  function handleImageLoad(event: ImageLoadEvent) {
-    const { width } = event.target;
-
-    const dropzoneElement = document.getElementById("dropzone");
-    if (!dropzoneElement) {
-      console.error("Dropzone element not found");
-      return;
-    }
-
-    const { width: parentWidth } = dropzoneElement.getBoundingClientRect();
-    const widthPercentage = (width / parentWidth) * 100;
-
-    if (widthPercentage >= 70) {
-      setDropzoneState((prevState) => ({
-        ...prevState,
-        fillPercentage: Math.max(widthPercentage, 100),
-      }));
-    } else {
-      setDropzoneState((prevState) => ({
-        ...prevState,
-        fillPercentage: 0,
-      }));
-    }
-  }
-
   return (
     <Box
       data-testid="dropzone"
@@ -151,12 +122,7 @@ const Dropzone: React.FC<DropzoneProps> = ({
           component="img"
           src={dropzoneState.imageUrl}
           alt={tHomePage("altText.hoveredImageAlt")}
-          onLoad={handleImageLoad}
-          className={`absolute max-w-full max-h-full object-contain ${
-            dropzoneState.fillPercentage && dropzoneState.fillPercentage >= 90
-              ? "w-[80%] h-[80%]"
-              : "w-auto h-auto"
-          }`}
+          className="absolute max-w-full max-h-full object-contain w-auto h-auto "
         />
       ) : (
         <Box className="text-center">
@@ -167,13 +133,13 @@ const Dropzone: React.FC<DropzoneProps> = ({
               fontSize: "7rem",
             }}
           />
-          <Typography variant="h5" color={theme.palette.secondary.main}>
+          <Typography  className="select-none" variant="h5" color={theme.palette.secondary.main}>
             <b>{tHomePage("dropzone.dragDrop")}</b>
           </Typography>
-          <Typography variant="h5" color={theme.palette.secondary.main}>
+          <Typography className="select-none" variant="h5" color={theme.palette.secondary.main}>
             <b>{tHomePage("dropzone.or")}</b>
           </Typography>
-          <Button variant="contained" component="label" color="secondary">
+          <Button className="select-none" variant="contained" component="label" color="secondary">
             <b>{tHomePage("dropzone.browseFile")}</b>
             <input
               type="file"

src/components/FileList.tsx

@@ -69,6 +69,7 @@ const FileList: React.FC<FileListProps> = ({ setDropzoneState }) => {
                     text-center max-w-full max-h-full object-contain `}
         >
           <Typography
+            className="select-none"
             variant="h5"
             color={theme.palette.text.primary}
             gutterBottom

src/components/Sidenav.tsx

@@ -56,7 +56,7 @@ const SideNav = ({ open, onClose }: DrawerMenuProps) => {
                 height="40"
               />
             </Icon>
-            <Typography className="pl-2 self-center" variant="h6">
+            <Typography className="pl-2 self-center select-none" variant="h6">
               <b>{t("sideNav.FertiScan")}</b>
             </Typography>
           </Toolbar>

src/components/UserMenu.tsx

@@ -3,7 +3,6 @@ import { usePlaceholder } from "@/classe/User";
 import { AccountCircle, Logout } from "@mui/icons-material";
 import DashboardIcon from "@mui/icons-material/Dashboard";
 import {
-  Divider,
   ListItemIcon,
   Menu,
   MenuItem,
@@ -94,6 +93,7 @@ const UserMenu = ({
         className="min-w-[36px]"
         onClick={(event) => event.preventDefault()}
         data-testid="profile-menu-item"
+        style={{ pointerEvents: "none", backgroundColor: "inherit" }}
       >
         <ListItemIcon aria-label={t("userMenu.altText.userIcon")}>
           <AccountCircle />
@@ -106,14 +106,12 @@ const UserMenu = ({
         </ListItemIcon>
         <Typography>{t("userMenu.dashboard")}</Typography>
       </MenuItem>
-      <Divider />
       <MenuItem data-testid="logout-menu-item" onClick={handleLogout}>
         <ListItemIcon aria-label={t("userMenu.altText.logoutIcon")}>
           <Logout />
         </ListItemIcon>
         <Typography>{t("userMenu.logout")}</Typography>
       </MenuItem>
-      <Divider />
       <Typography
         variant="caption"
         textAlign="center"