Fix notistack clear button vertical alignment when text is too large

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>
   );
 };

src/screens/shared/snackbar/notistack.css

@@ -0,0 +1,4 @@
+/* Fix notistack clear button vertical alignment */
+#notistack-snackbar {
+  width: calc(100% - 50px);
+}

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,