From ef905fb30bec27754a574beaccef4a1b5e3964c1 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Thu, 9 Jul 2026 11:23:41 +0200
Subject: [PATCH] refactor: add custom alert component and remove all other
 Alert standard components in all components

---
 frontend/src/components/LoginCard.tsx         |  28 ++--
 frontend/src/components/MyAlert.tsx           |  21 +++
 frontend/src/components/Sidebar.tsx           |   9 +-
 .../src/components/modals/AddStorageModal.tsx |  26 +---
 .../components/modals/ChangePasswordModal.tsx |  24 +--
 frontend/src/pages/AddProduct.tsx             |  38 ++---
 frontend/src/pages/Inventory.tsx              | 142 +++++++++++-------
 frontend/src/pages/ProductQuickView.tsx       |  31 +---
 frontend/src/pages/Settings.tsx               |  22 +--
 frontend/src/pages/Storages.tsx               |  63 ++++----
 frontend/src/pages/ViewProduct.tsx            |  29 +---
 frontend/src/utils/i18n/locales/de/de.json    |   1 +
 frontend/src/utils/i18n/locales/en/en.json    |   1 +
 13 files changed, 213 insertions(+), 222 deletions(-)
 create mode 100644 frontend/src/components/MyAlert.tsx

diff --git a/frontend/src/components/LoginCard.tsx b/frontend/src/components/LoginCard.tsx
index 83231aa..b5aae61 100644
--- a/frontend/src/components/LoginCard.tsx
+++ b/frontend/src/components/LoginCard.tsx
@@ -1,11 +1,12 @@
 import { useForm } from "@tanstack/react-form";
-import { Alert, Button, Input } from "@mui/joy";
+import { Button, Input } from "@mui/joy";
 import { useMutation } from "@tanstack/react-query";
 import { signInUser } from "../utils/api/auth";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { AlertInterface } from "../misc/interfaces";
+import { MyAlert } from "./MyAlert.tsx";
 
 export const LoginCard = () => {
   const { t } = useTranslation();
@@ -17,6 +18,15 @@ export const LoginCard = () => {
     text: "",
   });
 
+  useEffect(() => {
+    setAlert({
+      isAlert: true,
+      type: "primary",
+      header: t("success"),
+      text: t("logout-success-text"),
+    });
+  }, []);
+
   const form = useForm({
     defaultValues: {
       username: "",
@@ -77,15 +87,11 @@ export const LoginCard = () => {
             }}
           >
             {alert.isAlert && (
-              <Alert
-                variant="soft"
-                color={alert.type}
-                className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-              >
-                {alert.header}
-                <br />
-                {alert.text}
-              </Alert>
+              <MyAlert
+                type={alert.type}
+                header={alert.header}
+                text={alert.text}
+              />
             )}
             <form.Field name="username">
               {(field) => (
diff --git a/frontend/src/components/MyAlert.tsx b/frontend/src/components/MyAlert.tsx
new file mode 100644
index 0000000..738b114
--- /dev/null
+++ b/frontend/src/components/MyAlert.tsx
@@ -0,0 +1,21 @@
+import { Alert } from "@mui/joy";
+
+interface MyAlertProps {
+  type: "success" | "warning" | "danger" | "neutral" | "primary";
+  header: string;
+  text: string;
+}
+
+export const MyAlert = (props: MyAlertProps) => {
+  return (
+    <Alert
+      variant="soft"
+      color={props.type}
+      className="rounded-2xl drop-shadow-sm"
+    >
+      {props.header}
+      <br />
+      {props.text}
+    </Alert>
+  );
+};
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 493054f..b885e1d 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -50,7 +50,7 @@ export const Sidebar = () => {
         <Button
           variant="soft"
           size="sm"
-          className="lg:hidden transition-transform duration-200 ease-out"
+          className="transition-transform duration-200 ease-out"
           onClick={() => setIsOpen((open) => !open)}
           startDecorator={
             <span
@@ -61,7 +61,10 @@ export const Sidebar = () => {
               {isOpen ? <CloseIcon /> : <MenuIcon />}
             </span>
           }
-          sx={{ display: { lg: "none" } }}
+          sx={{
+            display: "inline-flex",
+            "@media (min-width: 1024px)": { display: "none" },
+          }}
         >
           {isOpen ? t("close") : t("menu")}
         </Button>
@@ -110,7 +113,7 @@ export const Sidebar = () => {
           <Button
             onClick={() => {
               Cookies.remove("token");
-              handleNavigate("/login");
+              handleNavigate("/login?logout=true");
             }}
             color="danger"
             startDecorator={<ExitToAppIcon />}
diff --git a/frontend/src/components/modals/AddStorageModal.tsx b/frontend/src/components/modals/AddStorageModal.tsx
index f7951e8..68ea914 100644
--- a/frontend/src/components/modals/AddStorageModal.tsx
+++ b/frontend/src/components/modals/AddStorageModal.tsx
@@ -1,19 +1,11 @@
-import {
-  Alert,
-  Button,
-  DialogContent,
-  DialogTitle,
-  Input,
-  Modal,
-  ModalDialog,
-  Stack,
-} from "@mui/joy";
+import { Button, DialogContent, DialogTitle, Input, Modal, ModalDialog, Stack, } from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import type { AlertInterface, NewStorage } from "../../misc/interfaces";
 import { mutateNewStorage } from "../../utils/api/storages";
 import { useState } from "react";
+import { MyAlert } from "../MyAlert.tsx";
 
 interface AddStorageModalProps {
   isOpen: boolean;
@@ -107,15 +99,11 @@ export const AddStorageModal = (props: AddStorageModalProps) => {
             </Stack>
           </form>
           {alert.isAlert && (
-            <Alert
-              variant="soft"
-              color={alert.type}
-              className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-            >
-              {alert.header}
-              <br />
-              {alert.text}
-            </Alert>
+            <MyAlert
+              type={alert.type}
+              header={alert.header}
+              text={alert.text}
+            />
           )}
         </ModalDialog>
       </Modal>
diff --git a/frontend/src/components/modals/ChangePasswordModal.tsx b/frontend/src/components/modals/ChangePasswordModal.tsx
index dbcd1e6..2653f5d 100644
--- a/frontend/src/components/modals/ChangePasswordModal.tsx
+++ b/frontend/src/components/modals/ChangePasswordModal.tsx
@@ -1,4 +1,11 @@
-import { Alert, Button, DialogTitle, Input, Modal, ModalDialog, Stack, } from "@mui/joy";
+import {
+  Button,
+  DialogTitle,
+  Input,
+  Modal,
+  ModalDialog,
+  Stack,
+} from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
@@ -6,6 +13,7 @@ import type { AlertInterface, ChangePasswordIntf } from "../../misc/interfaces";
 import { mutatePassword } from "../../utils/api/auth";
 import { useState } from "react";
 import { USER_ERROR_CODE } from "@stockhome/shared";
+import { MyAlert } from "../MyAlert.tsx";
 
 interface ChangePasswordProps {
   isOpen: boolean;
@@ -140,15 +148,11 @@ export const ChangePasswordModal = (props: ChangePasswordProps) => {
             </Stack>
           </form>
           {alert.isAlert && (
-            <Alert
-              variant="soft"
-              color={alert.type}
-              className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-            >
-              {alert.header}
-              <br />
-              {alert.text}
-            </Alert>
+            <MyAlert
+              type={alert.type}
+              header={alert.header}
+              text={alert.text}
+            />
           )}
         </ModalDialog>
       </Modal>
diff --git a/frontend/src/pages/AddProduct.tsx b/frontend/src/pages/AddProduct.tsx
index c0ae639..d38abac 100644
--- a/frontend/src/pages/AddProduct.tsx
+++ b/frontend/src/pages/AddProduct.tsx
@@ -1,6 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import {
-  Alert,
   Box,
   Button,
   Chip,
@@ -22,10 +21,10 @@ import type {
 } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
 import Cookies from "js-cookie";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 export const AddProduct = () => {
   const { t } = useTranslation();
-  const [success, setSuccess] = useState(false);
   const [alert, setAlert] = useState<AlertInterface>({
     isAlert: false,
     type: "neutral",
@@ -69,7 +68,6 @@ export const AddProduct = () => {
       storage_location_uuid: "",
     },
     onSubmit: async ({ value }) => {
-      setSuccess(false);
       mutate(value);
     },
   });
@@ -77,7 +75,12 @@ export const AddProduct = () => {
   const { mutate, isPending } = useMutation({
     mutationFn: (values: ProductFormValues) => createProduct(values),
     onSuccess: () => {
-      setSuccess(true);
+      setAlert({
+        isAlert: true,
+        type: "success",
+        header: "",
+        text: "",
+      });
     },
     onError: showError,
   });
@@ -287,28 +290,11 @@ export const AddProduct = () => {
             </Button>
           </div>
           {alert.isAlert && (
-            <Alert
-              color={alert.type}
-              variant="soft"
-              className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-            >
-              {alert.header}
-              <br />
-              {alert.text}
-            </Alert>
-          )}
-          {success && (
-            <Alert
-              color="success"
-              variant="soft"
-              className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
-            >
-              <div className="flex w-full items-center justify-between">
-                <Typography level="body-sm" className="text-emerald-700">
-                  {t("success")}
-                </Typography>
-              </div>
-            </Alert>
+            <MyAlert
+              type={alert.type}
+              header={alert.header}
+              text={alert.text}
+            />
           )}
         </form>
       </Box>
diff --git a/frontend/src/pages/Inventory.tsx b/frontend/src/pages/Inventory.tsx
index 6d5c6d9..e74a0ca 100644
--- a/frontend/src/pages/Inventory.tsx
+++ b/frontend/src/pages/Inventory.tsx
@@ -1,15 +1,5 @@
 import { useEffect, useState } from "react";
-import {
-  Alert,
-  Avatar,
-  Button,
-  Checkbox,
-  Chip,
-  CircularProgress,
-  Sheet,
-  Table,
-  Typography,
-} from "@mui/joy";
+import { Avatar, Button, Checkbox, Chip, CircularProgress, Sheet, Table, Typography, } from "@mui/joy";
 import { useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import AddIcon from "@mui/icons-material/Add";
@@ -19,6 +9,8 @@ import { formatDate } from "../utils/uxFncs";
 import Cookies from "js-cookie";
 import type { AlertInterface, ProductRow } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
+import CategoryIcon from "@mui/icons-material/category";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 export const InventoryPage = () => {
   const { t } = useTranslation();
@@ -127,20 +119,12 @@ export const InventoryPage = () => {
         {productsIsLoading && <CircularProgress size="sm" />}
       </div>
       {alert.isAlert && (
-        <Alert
-          variant="soft"
-          color={alert.type}
-          className="mt-4 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-        >
-          {alert.header}
-          <br />
-          {alert.text}
-        </Alert>
+        <MyAlert type={alert.type} header={alert.header} text={alert.text} />
       )}
 
       <Sheet
         variant="outlined"
-        className="mt-6 flex min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
+        className="mt-6 flex min-h-0 w-full max-w-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
       >
         <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 text-slate-700">
           <Typography level="body-lg" fontWeight="bold">
@@ -163,8 +147,9 @@ export const InventoryPage = () => {
             stripe="odd"
             variant="plain"
             hoverRow
-            className="min-w-240 text-slate-700"
+            className="w-full text-slate-700"
             sx={{
+              tableLayout: "fixed",
               "--TableCell-headBackground":
                 "var(--joy-palette-background-surface)",
               "& thead": {
@@ -176,23 +161,48 @@ export const InventoryPage = () => {
               "& thead tr": {
                 backgroundColor: "rgb(248 250 252)",
               },
-              "& thead th:nth-child(2)": {
-                width: "40%",
-              },
-              "& thead th:nth-child(3)": {
-                width: "14%",
-              },
               "& thead th": {
                 zIndex: 2,
                 backgroundColor: "rgb(248 250 252)",
                 backgroundImage: "none",
               },
+              "& thead th:nth-child(1)": {
+                width: "44px",
+              },
+              "& thead th:nth-child(2)": {
+                width: "22%",
+                minWidth: "160px",
+              },
+              "& thead th:nth-child(3)": {
+                width: "9%",
+                minWidth: "70px",
+              },
+              "& thead th:nth-child(4)": {
+                width: "12%",
+                minWidth: "90px",
+              },
+              "& thead th:nth-child(5)": {
+                width: "17%",
+                minWidth: "120px",
+              },
+              "& thead th:nth-child(6)": {
+                width: "13%",
+                minWidth: "100px",
+              },
+              "& thead th:nth-child(7)": {
+                width: "13%",
+                minWidth: "100px",
+              },
+              "& thead th:nth-child(8)": {
+                width: "14%",
+                minWidth: "100px",
+              },
               "& tr > *:nth-child(n+4)": { textAlign: "left" },
             }}
           >
             <thead>
               <tr className="text-slate-600">
-                <th className="px-4 py-4">
+                <th className="px-2 py-4">
                   <Checkbox
                     checked={rows.length > 0 && selected.length === rows.length}
                     indeterminate={
@@ -203,13 +213,13 @@ export const InventoryPage = () => {
                     sx={{ verticalAlign: "sub" }}
                   />
                 </th>
-                <th className="px-6 py-4">{t("product-name")}</th>
-                <th className="px-6 py-4">{t("price")}</th>
-                <th className="px-6 py-4">{t("stock")}</th>
-                <th className="px-6 py-4">{t("storage-place")}</th>
-                <th className="px-6 py-4">{t("expiry-date")}</th>
-                <th className="px-6 py-4">{t("bottling-date")}</th>
-                <th className="px-6 py-4 text-right">{t("actions")}</th>
+                <th className="px-3 py-4">{t("product-name")}</th>
+                <th className="px-3 py-4">{t("price")}</th>
+                <th className="px-3 py-4">{t("stock")}</th>
+                <th className="px-3 py-4">{t("storage-place")}</th>
+                <th className="px-3 py-4">{t("expiry-date")}</th>
+                <th className="px-3 py-4">{t("bottling-date")}</th>
+                <th className="px-3 py-4 text-right">{t("actions")}</th>
               </tr>
             </thead>
             <tbody>
@@ -225,61 +235,81 @@ export const InventoryPage = () => {
                     aria-checked={isItemSelected}
                     tabIndex={-1}
                   >
-                    <th scope="row" className="px-4 py-5">
+                    <th scope="row" className="px-2 py-5">
                       <Checkbox
                         checked={isItemSelected}
                         slotProps={{ input: { "aria-labelledby": labelId } }}
                         sx={{ verticalAlign: "top" }}
                       />
                     </th>
-                    <th id={labelId} scope="row" className="px-6 py-5">
-                      <div className="flex items-center gap-4">
-                        <Avatar size="lg" variant="soft" src={row.imageUrl} />
+                    <th
+                      id={labelId}
+                      scope="row"
+                      className="px-3 py-5 overflow-hidden"
+                    >
+                      <div className="flex min-w-0 items-center gap-3">
+                        <Avatar size="lg" variant="soft" className="shrink-0">
+                          <CategoryIcon />
+                        </Avatar>
                         <div className="min-w-0">
                           <Typography
                             level="title-md"
-                            className="text-slate-900"
+                            className="text-slate-900 truncate"
                           >
                             {row.name}
                           </Typography>
                           <Typography
                             level="body-sm"
-                            className="text-slate-500"
+                            className="text-slate-500 truncate"
                           >
                             {row.description}
                           </Typography>
                         </div>
                       </div>
                     </th>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.price}</Typography>
-                      <Typography level="body-sm" className="text-slate-400">
+                    <td className="px-3 py-5 overflow-hidden">
+                      <Typography level="title-md" className="truncate">
+                        {row.price}
+                      </Typography>
+                      <Typography
+                        level="body-sm"
+                        className="truncate text-slate-400"
+                      >
                         {Cookies.get("currency")}
                       </Typography>
                     </td>
-                    <td className="px-6 py-5">
+                    <td className="px-3 py-5 overflow-hidden">
                       <Chip
                         variant="soft"
                         color="neutral"
                         size="lg"
-                        className="px-3"
+                        className="max-w-full px-3"
                       >
-                        {row.stock}
+                        <span className="truncate">{row.stock}</span>
                       </Chip>
                     </td>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.location}</Typography>
-                      <Typography level="body-sm" className="text-slate-500">
+                    <td className="px-3 py-5 overflow-hidden">
+                      <Typography level="title-md" className="truncate">
+                        {row.location}
+                      </Typography>
+                      <Typography
+                        level="body-sm"
+                        className="truncate text-slate-500"
+                      >
                         {row.locationDetail}
                       </Typography>
                     </td>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.expiryDate}</Typography>
+                    <td className="px-3 py-5 overflow-hidden">
+                      <Typography level="title-md" className="truncate">
+                        {row.expiryDate}
+                      </Typography>
                     </td>
-                    <td className="px-6 py-5">
-                      <Typography level="title-md">{row.refillDate}</Typography>
+                    <td className="px-3 py-5 overflow-hidden">
+                      <Typography level="title-md" className="truncate">
+                        {row.refillDate}
+                      </Typography>
                     </td>
-                    <td className="px-6 py-5 text-right">
+                    <td className="px-3 py-5 text-right">
                       <Button
                         onClick={() =>
                           navigate({
diff --git a/frontend/src/pages/ProductQuickView.tsx b/frontend/src/pages/ProductQuickView.tsx
index 843f5e6..cd0b3c4 100644
--- a/frontend/src/pages/ProductQuickView.tsx
+++ b/frontend/src/pages/ProductQuickView.tsx
@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getStorages } from "../utils/api/storages.ts";
 import {
-  Alert,
   Box,
   Button,
   Chip,
@@ -26,6 +25,7 @@ import type {
 import type { ApiError } from "../utils/api/apiError";
 import Cookies from "js-cookie";
 import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 export const ProductQuickView = () => {
   const uuid = window.location.search.split("uuid=")[1];
@@ -165,7 +165,7 @@ export const ProductQuickView = () => {
               form.handleSubmit();
             }}
           >
-            <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
+            <div className="gap-5 lg:grid-cols-[1.2fr_1fr]">
               <div className="space-y-4">
                 <div className="space-y-1">
                   <Typography level="title-md" className="text-slate-900">
@@ -338,28 +338,11 @@ export const ProductQuickView = () => {
               </Button>
             </div>
             {alert.isAlert && (
-              <Alert
-                color={alert.type}
-                variant="soft"
-                className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-              >
-                {alert.header}
-                <br />
-                {alert.text}
-              </Alert>
-            )}
-            {success && (
-              <Alert
-                color="success"
-                variant="soft"
-                className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
-              >
-                <div className="flex w-full items-center justify-between">
-                  <Typography level="body-sm" className="text-emerald-700">
-                    {t("success")}
-                  </Typography>
-                </div>
-              </Alert>
+              <MyAlert
+                type={alert.type}
+                header={alert.header}
+                text={alert.text}
+              />
             )}
           </form>
         </Box>
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index be562e7..74b6d39 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,13 +1,4 @@
-import {
-  Alert,
-  Button,
-  Chip,
-  CircularProgress,
-  Divider,
-  Input,
-  Sheet,
-  Typography,
-} from "@mui/joy";
+import { Button, Chip, CircularProgress, Divider, Input, Sheet, Typography, } from "@mui/joy";
 import { useForm } from "@tanstack/react-form";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import Cookies from "js-cookie";
@@ -17,6 +8,7 @@ import type { ApiError } from "../utils/api/apiError";
 import { fetchSettings, mutateSettings } from "../utils/api/settings";
 import { useEffect, useState } from "react";
 import { ChangePasswordModal } from "../components/modals/ChangePasswordModal";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 export const Settings = () => {
   const { t } = useTranslation();
@@ -118,15 +110,7 @@ export const Settings = () => {
 
       <Sheet className="mt-6 rounded-3xl border border-white/70 bg-white/80 p-6 shadow-[0_24px_60px_rgba(12,38,78,0.12)] backdrop-blur">
         {alert.isAlert && (
-          <Alert
-            variant="soft"
-            color={alert.type}
-            className="mb-6 rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-          >
-            {alert.header}
-            <br />
-            {alert.text}
-          </Alert>
+          <MyAlert type={alert.type} header={alert.header} text={alert.text} />
         )}
         {settingsPending ? (
           <div className="flex items-center justify-center py-16">
diff --git a/frontend/src/pages/Storages.tsx b/frontend/src/pages/Storages.tsx
index 6e1fa5b..72113de 100644
--- a/frontend/src/pages/Storages.tsx
+++ b/frontend/src/pages/Storages.tsx
@@ -1,13 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { getStorages } from "../utils/api/storages";
-import {
-  Alert,
-  Button,
-  CircularProgress,
-  Sheet,
-  Table,
-  Typography,
-} from "@mui/joy";
+import { Button, CircularProgress, Sheet, Table, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import type { AlertInterface, Storage } from "../misc/interfaces";
 import type { ApiError } from "../utils/api/apiError";
@@ -15,6 +8,7 @@ import { StorageRow } from "../components/StorageRow";
 import { useEffect, useState } from "react";
 import { AddStorageModal } from "../components/modals/AddStorageModal";
 import AddIcon from "@mui/icons-material/Add";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 export const Storages = () => {
   const { t } = useTranslation();
@@ -74,21 +68,13 @@ export const Storages = () => {
           </Button>
         </div>
         {alert.isAlert && (
-          <Alert
-            variant="soft"
-            color={alert.type}
-            className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-          >
-            {alert.header}
-            <br />
-            {alert.text}
-          </Alert>
+          <MyAlert type={alert.type} header={alert.header} text={alert.text} />
         )}
       </div>
 
       <Sheet
         variant="outlined"
-        className="mt-6 flex min-h-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
+        className="mt-6 flex min-h-0 w-full max-w-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white/80 shadow-sm sm:h-[calc(100vh-260px)]"
       >
         <AddStorageModal isOpen={modal} setOpen={setModal} />
         {isLoading ? (
@@ -108,8 +94,9 @@ export const Storages = () => {
                 stripe="odd"
                 variant="plain"
                 hoverRow
-                className="min-w-240 text-slate-700"
+                className="w-full text-slate-700"
                 sx={{
+                  tableLayout: "fixed",
                   "--TableCell-headBackground":
                     "var(--joy-palette-background-surface)",
                   "& thead": {
@@ -121,27 +108,41 @@ export const Storages = () => {
                   "& thead tr": {
                     backgroundColor: "rgb(248 250 252)",
                   },
-                  "& thead th:nth-child(2)": {
-                    width: "40%",
-                  },
-                  "& thead th:nth-child(3)": {
-                    width: "14%",
-                  },
                   "& thead th": {
                     zIndex: 2,
                     backgroundColor: "rgb(248 250 252)",
                     backgroundImage: "none",
                   },
-                  "& tr > *:nth-child(n+4)": { textAlign: "left" },
+                  "& thead th:nth-child(1)": {
+                    width: "26%",
+                    minWidth: "140px",
+                  },
+                  "& thead th:nth-child(2)": {
+                    width: "34%",
+                    minWidth: "160px",
+                  },
+                  "& thead th:nth-child(3)": {
+                    width: "16%",
+                    minWidth: "110px",
+                  },
+                  "& thead th:nth-child(4)": {
+                    width: "16%",
+                    minWidth: "110px",
+                  },
+                  "& thead th:nth-child(5)": {
+                    width: "8%",
+                    minWidth: "80px",
+                  },
+                  "& tr > *:nth-child(n+3)": { textAlign: "left" },
                 }}
               >
                 <thead>
                   <tr className="text-slate-600">
-                    <th className="px-6 py-4">{t("storage-name")}</th>
-                    <th className="px-6 py-4">{t("description")}</th>
-                    <th className="px-6 py-4">{t("created-at")}</th>
-                    <th className="px-6 py-4">{t("updated-at")}</th>
-                    <th className="px-6 py-4 text-right"></th>
+                    <th className="px-3 py-4">{t("storage-name")}</th>
+                    <th className="px-3 py-4">{t("description")}</th>
+                    <th className="px-3 py-4">{t("created-at")}</th>
+                    <th className="px-3 py-4">{t("updated-at")}</th>
+                    <th className="px-3 py-4 text-right"></th>
                   </tr>
                 </thead>
                 <tbody>
diff --git a/frontend/src/pages/ViewProduct.tsx b/frontend/src/pages/ViewProduct.tsx
index b804117..c3c6e80 100644
--- a/frontend/src/pages/ViewProduct.tsx
+++ b/frontend/src/pages/ViewProduct.tsx
@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getStorages } from "../utils/api/storages.ts";
 import {
-  Alert,
   Box,
   Button,
   Chip,
@@ -27,6 +26,7 @@ import type { ApiError } from "../utils/api/apiError";
 import QrCodeIcon from "@mui/icons-material/QrCode";
 import Cookies from "js-cookie";
 import QRCode from "qrcode";
+import { MyAlert } from "../components/MyAlert.tsx";
 
 interface ViewProductProps {
   uuid: string;
@@ -369,28 +369,11 @@ export const ViewProduct = (props: ViewProductProps) => {
             </div>
 
             {alert.isAlert && (
-              <Alert
-                color={alert.type}
-                variant="soft"
-                className="rounded-2xl border border-rose-200/70 bg-rose-50/80 text-rose-700 shadow-[0_12px_30px_rgba(220,38,38,0.12)]"
-              >
-                {alert.header}
-                <br />
-                {alert.text}
-              </Alert>
-            )}
-            {success && (
-              <Alert
-                color="success"
-                variant="soft"
-                className="rounded-2xl border border-emerald-200/70 bg-emerald-50/80 text-emerald-700 shadow-[0_14px_30px_rgba(16,185,129,0.18)]"
-              >
-                <div className="flex w-full items-center justify-between">
-                  <Typography level="body-sm" className="text-emerald-700">
-                    {t("success")}
-                  </Typography>
-                </div>
-              </Alert>
+              <MyAlert
+                type={alert.type}
+                header={alert.header}
+                text={alert.text}
+              />
             )}
           </form>
         </Box>
diff --git a/frontend/src/utils/i18n/locales/de/de.json b/frontend/src/utils/i18n/locales/de/de.json
index 6722956..15bbdf8 100644
--- a/frontend/src/utils/i18n/locales/de/de.json
+++ b/frontend/src/utils/i18n/locales/de/de.json
@@ -57,6 +57,7 @@
   "error": "Fehler",
   "success": "Erfolg",
   "submit": "Absenden",
+  "logout-success-text": "Logout erfolgreich!",
   "SU005": "Das Passwort wurde erfolgreich geändert!",
   "SE001": "Die Einstellungen wurden erfolgreich geändert!",
   "EG001": "Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.",
diff --git a/frontend/src/utils/i18n/locales/en/en.json b/frontend/src/utils/i18n/locales/en/en.json
index cda7e7a..99349d1 100644
--- a/frontend/src/utils/i18n/locales/en/en.json
+++ b/frontend/src/utils/i18n/locales/en/en.json
@@ -57,6 +57,7 @@
   "error": "Error",
   "success": "Success",
   "submit": "Submit",
+  "logout-success-text": "Logout successful!",
   "SU005": "Your password is updated successfully!",
   "SE001": "The settings are updated successfully!",
   "EG001": "An unexpected error occurred. Please try again later.",