From 46260a06568e114ea93e990de83d4d4c83318bc5 Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Wed, 17 Apr 2024 16:47:14 +0700
Subject: [PATCH] Fix notistack clear button vertical alignment when text is
 too large

---
 src/screens/component-catalog/snackbar-story.tsx | 14 +++++++++++++-
 src/screens/shared/snackbar/notistack.css        |  4 ++++
 src/screens/shared/snackbar/snackbar.tsx         |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/screens/shared/snackbar/notistack.css

diff --git a/src/screens/component-catalog/snackbar-story.tsx b/src/screens/component-catalog/snackbar-story.tsx
index 979b7021..de106103 100644
--- a/src/screens/component-catalog/snackbar-story.tsx
+++ b/src/screens/component-catalog/snackbar-story.tsx
@@ -10,9 +10,21 @@ export const SnackbarStory = () => {
         Show success snackbar
       </button>
 
-      <button onClick={() => notifyError({}, { duration: 10000 })}>
+      <button onClick={() => notifyError(false, { duration: 10000 })}>
         Show error snackbar
       </button>
+
+      <button
+        onClick={() =>
+          notifyError(false, {
+            duration: 100 * 1000,
+            message:
+              "Unable to generate cards. Please try updating your prompt",
+          })
+        }
+      >
+        Show long error snackbar
+      </button>
     </div>
   );
 };
diff --git a/src/screens/shared/snackbar/notistack.css b/src/screens/shared/snackbar/notistack.css
new file mode 100644
index 00000000..53f85da4
--- /dev/null
+++ b/src/screens/shared/snackbar/notistack.css
@@ -0,0 +1,4 @@
+/* Fix notistack clear button vertical alignment */
+#notistack-snackbar {
+  width: calc(100% - 50px);
+}
diff --git a/src/screens/shared/snackbar/snackbar.tsx b/src/screens/shared/snackbar/snackbar.tsx
index 51814d77..fa6c1fde 100644
--- a/src/screens/shared/snackbar/snackbar.tsx
+++ b/src/screens/shared/snackbar/snackbar.tsx
@@ -6,6 +6,7 @@ import { userStore } from "../../../store/user-store.ts";
 import { hapticNotification } from "../../../lib/telegram/haptics.ts";
 import { t } from "../../../translations/t.ts";
 import { ClearSnackbar } from "./clear-snackbar.tsx";
+import "./notistack.css";
 
 const sharedStyles = {
   borderRadius: theme.borderRadius,