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,