coming up on six years…
1 Like
This issue is infuriating!
My colleagues also ask me how they can deactivate the pop-up notifications because they can’t continue working during this time. Please work on a solution @asana.
2 Likes
Please implement this feature to turn off the pop-up notifications, it makes me not want to check things off because it is so frustrating.
1 Like
I can’t believe it’s been this long and there still isn’t an option to turn these off…
The CSS workarounds don’t work for me, as I use the desktop app.
The number of years this has been an issue - and the number of people who have voiced their displeasure with the current system - don’t give me a lot of confidence in Asana long-term, honestly.
2 Likes
Please vote on this - it is so annoying
1 Like
I agree. They clearly don’t care.
Dear god please add a preference to disable these pop-ups! They aggressively break the flow of what I’m trying to do, covering up the things I’m trying to click on in quick sequence.
1 Like
I found this custom .css to work to hide the pop-ups:
.ToastManager,
.TipToast.ToastContainer,
.ToastNotificationContent,
.ToastStateManager-groups,
.ToastSlideInTransition{
display: none;
}
The CSS-injecting chrome extension I’m using to do this is here:
2 Likes
Updating this for anyone that may need it after recent update broke the previous script. This works as of Sep 17th, 2024 with TamperMonkey - it moves the Toasts to the right side of the screen:
// ==UserScript==
// @name Asana to Toasts to the Right 10-17-24
// @namespace http://tampermonkey.net/
// @version 2024-10-17
// @description Stupid Toasts to the right
// @author You
// @match app.asana.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==(function() {
‘use strict’;// Wait until the document is fully loaded window.addEventListener('load', function() { // Use querySelector to find the toast manager element var manager = document.querySelector('.ToastStateManager-groups'); // If the element is found, apply the changes if (manager) { manager.style.left = 'auto'; // Remove left positioning manager.style.right = '0px'; // Set right positioning } });})();
Hey Asana,
Any update on this feature? It looks like it was added to the product backlog 6 years ago, but there are similar questions still being asked about this issue. It makes it really difficult to see my to-do list with all of the notifications popping up!
Thanks,
Robyn
Hello! Any update on this? I create multiple tasks daily and my sidebar fills up pretty quickly which hides my ability to keep creating more using a template. I have to manually click the X to remove the ones blocking my view.
6 years running and not a peep from Asana.
Looks like we’re stuck with these trash pop ups. 
1 Like
Upvoted. Please sort this, the pop-ups are very distracting and for the most part unnecessary.
Hi everyone! A Group PM Lead here who has recently committed to being more active in our forum. Sorry for you all feeling like you’re not heard on this! Over the last year my Design System team has actually been actively working on making Toasts less annoying (remember the days of each Rule firing off its own toast notification? vs the single Toast today). We fully acknowledge we’re not 100% there yet, but this type of feedback is exactly what helps us inform next iterations so very much appreciated and not ignored 
2 Likes
The collapsed toasts have helped a lot. I have 12 active automations running on my tasks now. Only 1-3 run at any one time, but it still makes a big difference.
1 Like
Hello,
Still finding the toasts pretty annoying, even if certain toasts are grouped together (like rules). Please add an option to switch them off, or even better, the option to choose which ones you’d like displayed and which ones you don’t. For example, I’d like to still see a toast for when a task is completed, but not for the action “undo” or the roles.
Thanks!
Dina
1 Like
I know this isn’t ideal, but here’s a solution to hide them:
-
Add an extension to your browser that allows CSS rules for specific websites – I use ‘User JavaScript and CSS’ Chrome extension but I assume other extensions will work similarly
-
Go to Asana
-
Click the extension to open it (in Chrome this is in the top right of the screen, beside the URL bar)
-
Where it says “Add CSS” or “Start typing SCSS or CSS”, paste this code:
.
ToastStateManager-groups {
display: none !important
} -
Give the rule a name, and save it.
It should look like this:
If you want to see the pop-ups again, just click the little toggle button in that rule (see the left column, beside the name '“Hide pop-ups”) to switch it off.
Can’t believe this has not been solved yet. Super annoying. Blocking tasks if I go through my list and tick items off.
1 Like
Updating this with a complete rewrite as of 11/08/2025. This should be a much more robust script for TamperMonkey that moves the Toasts to the right side of the screen. Just copy and paste the code below into TamperMonkey and it should work.
// ==UserScript==
// @name Move Asana toasts to right v2
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Move Asana toast notifications from bottom-left to bottom-right with robust DOM monitoring
// @author Enhanced Version
// @match https://app.asana.com/*
// @match https://asana.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==(function() {
‘use strict’;// Enhanced CSS with multiple selectors and higher specificity // Only modify positioning properties, preserve all styling const toastStyles = ` /* Main toast container - highest specificity */ body div.ToastStateManager-groups, body > div.ToastStateManager-groups, div.ToastStateManager-groups { left: auto !important; right: 20px !important; /* Preserve bottom positioning but ensure it's set */ bottom: 20px !important; top: auto !important; /* Minimize transform changes to preserve layout */ transform: translateX(0) !important; /* Preserve other positioning properties */ position: fixed !important; z-index: 2147483647 !important; } /* Individual toast groups - preserve internal layout */ body div.DefaultToastGroup, body > div.DefaultToastGroup, div.DefaultToastGroup, div[data-testid="DefaultToastGroup"] { /* Only adjust positioning, preserve all other styles */ position: relative !important; left: auto !important; right: 0 !important; transform: none !important; /* Preserve margin and padding */ } /* Individual toast items - preserve all styling except positioning */ body div.ToastItem, body > div.ToastItem, div.ToastItem, div[role="alert"][aria-live="polite"] { /* Minimal positioning changes */ position: relative !important; /* Preserve existing margin/width/height/padding */ margin: 8px 0 !important; left: auto !important; right: 0 !important; transform: none !important; /* Use flexbox for alignment instead of float to preserve layout */ display: flex !important; justify-content: flex-end !important; align-items: stretch !important; /* Preserve all box properties */ box-sizing: border-box !important; } /* Target only the main container for dynamic positioning */ div[class*="ToastStateManager"] { left: auto !important; right: 20px !important; bottom: 20px !important; top: auto !important; position: fixed !important; } /* More specific selector for inline style overrides */ /* Only override positioning, preserve all other inline styles */ [style*="position: fixed"][style*="bottom:"]:has(.ToastItem), [style*="position:fixed"][style*="bottom:"]:has(.ToastItem) { left: auto !important; right: 20px !important; /* Don't override other style properties */ } `; // Function to apply styles immediately function applyStyles() { try { GM_addStyle(toastStyles); console.log('Asana Toasts: Enhanced styles applied'); } catch (e) { // Fallback if GM_addStyle fails const styleElement = document.createElement('style'); styleElement.textContent = toastStyles; (document.head || document.documentElement).appendChild(styleElement); console.log('Asana Toasts: Fallback styles applied'); } } // Function to find and reposition existing toast containers function repositionExistingToasts() { const selectors = [ '.ToastStateManager-groups', '.DefaultToastGroup', '[data-testid="DefaultToastGroup"]', '.ToastItem', '[role="alert"]', '[aria-live="polite"]' ]; selectors.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(element => { if (element && element.style) { const computedStyle = window.getComputedStyle(element); // Only modify the main container, preserve toast item styling if (element.classList.contains('ToastStateManager-groups')) { if (computedStyle.position === 'fixed' && (computedStyle.bottom !== 'auto' || computedStyle.bottom === '')) { // Only modify positioning, preserve all other inline styles element.style.setProperty('left', 'auto', 'important'); element.style.setProperty('right', '20px', 'important'); // Use minimal transform change element.style.setProperty('transform', 'translateX(0)', 'important'); } } else if (element.classList.contains('ToastItem') || element.getAttribute('role') === 'alert') { // For individual toast items, only ensure proper positioning // Don't override width, height, padding, margin, colors, etc. if (computedStyle.position === 'relative' || computedStyle.position === 'static') { element.style.setProperty('position', 'relative', 'important'); } element.style.setProperty('left', 'auto', 'important'); element.style.setProperty('right', '0', 'important'); // Don't modify transform for individual items to preserve layout } } }); }); } // Function to setup MutationObserver function setupObserver() { const observer = new MutationObserver((mutations) => { let shouldReposition = false; mutations.forEach((mutation) => { if (mutation.type === 'childList') { // Check for added toast-related nodes mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { // Element node const tagName = node.tagName?.toLowerCase() || ''; const className = node.className || ''; const testId = node.getAttribute('data-testid') || ''; const role = node.getAttribute('role') || ''; const ariaLive = node.getAttribute('aria-live') || ''; // Check if this node is toast-related if (tagName === 'div' && (className.includes('Toast') || testId.includes('Toast') || role === 'alert' || ariaLive === 'polite')) { shouldReposition = true; } // Also check child nodes if (node.querySelectorAll) { const toastElements = node.querySelectorAll('[class*="Toast"], [data-testid*="Toast"], [role="alert"], [aria-live="polite"]'); if (toastElements.length > 0) { shouldReposition = true; } } } }); } }); if (shouldReposition) { setTimeout(repositionExistingToasts, 10); // Small delay for DOM to settle } }); // Start observing the entire document observer.observe(document.body || document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); console.log('Asana Toasts: MutationObserver setup complete'); return observer; } // Main initialization function function init() { console.log('Asana Toasts: Initialization started'); // Apply styles immediately applyStyles(); // Try to reposition existing toasts setTimeout(repositionExistingToasts, 100); // Setup observer if DOM is ready if (document.body) { setupObserver(); } else { // Wait for DOM to be ready document.addEventListener('DOMContentLoaded', () => { setTimeout(setupObserver, 100); }); } // Also run periodically as a fallback setInterval(repositionExistingToasts, 2000); } // Initialize at different stages to catch all possibilities if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // Also try immediately in case we're late setTimeout(init, 0);})();