Skip to content

Notification#229

Merged
tenkus47 merged 2 commits into
devfrom
notification
Jun 19, 2026
Merged

Notification#229
tenkus47 merged 2 commits into
devfrom
notification

Conversation

@Lungsangg

Copy link
Copy Markdown
Member

No description provided.

@Lungsangg Lungsangg requested a review from tenkus47 June 15, 2026 18:03
@greptile-apps

greptile-apps Bot commented Jun 15, 2026

Copy link
Copy Markdown

Confidence Score: 3/5

The 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

Comment on lines +177 to +184
<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">

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 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"];

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 "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.

Suggested change
const validTypes = ["image/png", "image/jpg", "image/jpeg", "image/webp"];
const validTypes = ["image/png", "image/jpeg", "image/webp"];

@tenkus47 tenkus47 merged commit 5441934 into dev Jun 19, 2026
2 of 3 checks passed
@tenkus47 tenkus47 deleted the notification branch June 19, 2026 12:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants