Notification#229
Conversation
Confidence Score: 3/5The notification tab will render a doubly-nested full-height container with duplicate borders and rounded corners inside TaskForm, making the UI visually broken whenever the Notification tab is active. The NotificationForm component was built as a standalone full-page widget but is mounted as an inline child of TaskForm's identically-styled flex container, causing a box-inside-a-box layout with double dashed borders, double rounded corners, and an overflowing height constraint on the primary feature path. NotificationForm.tsx needs its root wrapper div (and loading-state div) stripped of the standalone container styles; TaskForm.tsx may need to wrap NotificationForm in the same overflow-y-auto flex-1 div used for the task tab. Reviews (1): Last reviewed commit: "test_update" | Re-trigger Greptile |
| <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed flex items-center justify-center"> | ||
| <p className="text-gray-500">Loading...</p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed overflow-y-auto"> |
There was a problem hiding this comment.
Double-container layout breaks when embedded in TaskForm
NotificationForm wraps its own content in a full-height, bordered, rounded, margin-bearing container (my-4 h-[calc(100vh-40px)] rounded-l-2xl border border-dashed). When this component is rendered inside TaskForm's already-styled flex-col container (which has the same h-[calc(100vh-40px)] and the same background/border/radius), the result is a nested container with double borders, double rounded corners, a duplicate full-viewport-height calculation, and the my-4 top/bottom margin eating into the available space — making the content overflow or display incorrectly. Both the loading state (div at line 177) and the main content root (div at line 184) need to drop these wrapper styles and instead render as a plain scrollable flex child, matching the pattern used by the task tab's inner <div className="overflow-y-auto flex-1"> wrapper in TaskForm.tsx.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| return; | ||
| } | ||
|
|
||
| const validTypes = ["image/png", "image/jpg", "image/jpeg", "image/webp"]; |
There was a problem hiding this comment.
"image/jpg" is not a registered MIME type — browsers always report .jpg files as "image/jpeg". The entry is harmless since "image/jpeg" is already present, but it is dead code and should be removed.
| const validTypes = ["image/png", "image/jpg", "image/jpeg", "image/webp"]; | |
| const validTypes = ["image/png", "image/jpeg", "image/webp"]; |
No description provided.