Type
UX & Architecture
Severity
Medium
Location
frontend/src/app/pages/dashboard.tsx (around lines 114–130)
Description
The ExportReportButton component implements success and error notifications using locally rendered elements positioned absolutely relative to the button. These notifications are tightly coupled to the component instead of being managed through a centralized, application-wide toast provider.
Because the notification is rendered within the component's layout hierarchy, it is susceptible to clipping, stacking context (z-index) conflicts, and overflow: hidden containers. This makes notification visibility dependent on where the component is rendered.
A centralized toast system provides a more reliable, reusable, and consistent notification experience across the application.
User Impact
- Success or error messages may be partially or completely hidden.
- Notifications can be clipped by parent containers with
overflow: hidden.
- Inconsistent notification behavior across different layouts.
- Reduced visibility of important user feedback.
Steps to Reproduce
- Render the
ExportReportButton inside a container with overflow: hidden or a restrictive stacking context.
- Trigger a success or error notification.
- Observe that the notification may be clipped, partially visible, or hidden behind other UI elements.
Expected Behavior
Notifications should appear consistently above the application's UI regardless of where the triggering component is rendered.
Current Behavior
- Notifications are rendered locally within the component.
- Positioning depends on the parent layout.
- Visibility can be affected by container overflow and stacking contexts.
Recommended Fix
Replace the localized notification implementation with a centralized toast notification system.
Possible improvements include:
- Integrate a global toast library such as Sonner or React Hot Toast.
- Render notifications through a single top-level provider.
- Standardize success, error, warning, and informational toast styles across the application.
- Keep notification logic separate from component layout.
Acceptance Criteria
Definition of Done
Type
UX & Architecture
Severity
Medium
Location
frontend/src/app/pages/dashboard.tsx(around lines 114–130)Description
The
ExportReportButtoncomponent implements success and error notifications using locally rendered elements positioned absolutely relative to the button. These notifications are tightly coupled to the component instead of being managed through a centralized, application-wide toast provider.Because the notification is rendered within the component's layout hierarchy, it is susceptible to clipping, stacking context (
z-index) conflicts, andoverflow: hiddencontainers. This makes notification visibility dependent on where the component is rendered.A centralized toast system provides a more reliable, reusable, and consistent notification experience across the application.
User Impact
overflow: hidden.Steps to Reproduce
ExportReportButtoninside a container withoverflow: hiddenor a restrictive stacking context.Expected Behavior
Notifications should appear consistently above the application's UI regardless of where the triggering component is rendered.
Current Behavior
Recommended Fix
Replace the localized notification implementation with a centralized toast notification system.
Possible improvements include:
Acceptance Criteria
ExportReportButton.Definition of Done
ExportReportButtonmigrated to the global toast API.