fix: wrap account deletion alert text to prevent 3-column layout#295
Merged
fix: wrap account deletion alert text to prevent 3-column layout#295
Conversation
MUI Joy Alert uses flexbox, causing mixed text and <strong> children to render as separate flex items. Wrapping in a <span> keeps the message as a single inline flow. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes a layout issue in the frontend Settings → Account Deletion warning where MUI Joy’s Alert flexbox layout was rendering mixed text and <strong> children as separate columns. The alert message is wrapped in a single inline container so it flows as one continuous sentence.
Changes:
- Wrap the account deletion warning
Alertmessage content in a single<span>to prevent multi-column flex item rendering.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/views/Settings/AccountDeletion.tsx | Wraps the warning alert’s mixed inline content in a single child element to keep text rendering as one sentence. |
Copilot's findings
- Files reviewed: 1/1 changed files
- Comments generated: 0
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
MUI Joy's Alert component uses flexbox layout, which caused the mixed text and
<strong>children to render as three separate flex columns instead of a single sentence.Fix: Wrap the alert content in a so the text flows inline as one continuous message.
Before:
The message was split across 3 columns: text | bold date | text
After:
The message renders as a single, readable sentence.