Skip to content

Add spacing in message and button in header on Newcomers Check page #14076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pranav-027 wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −0
Open

Add spacing in message and button in header on Newcomers Check page #14076

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/webpacker/components/NewcomerChecks/DuplicateCheckerHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export default function DuplicateCheckerHeader({
{NEWCOMER_COUNT_THRESHOLD}
), it may be possible that your job actually needs more time to run.
Please use the button at your own discretion.
{' '}
Copy link
Copy Markdown
Member

@danieljames-dj danieljames-dj Apr 19, 2026

Choose a reason for hiding this comment

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

@coder13 Can you please let us know if this the right way to add spacing or do you have any other idea?

@kr-matthews Looking for input from you too.

Copy link
Copy Markdown
Member Author

@pranav-027 pranav-027 Apr 19, 2026

Choose a reason for hiding this comment

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

Hello @danieljames-dj ,

You can check the lines 40, 42, and 46 in the same file. Same approch has been used to add spaces

Copy link
Copy Markdown
Contributor

@coder13 coder13 Apr 20, 2026

Choose a reason for hiding this comment

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

DM me if you want feedback for PRs. I happened to randomly click on this one.

It's not a terrible method, I do it.

But a stronger way, if you actually want padding and not a space, is to use css like margin / padding / gap. You can use gap for elements configured as "flex".

Copy link
Copy Markdown
Member

@danieljames-dj danieljames-dj Apr 22, 2026

Choose a reason for hiding this comment

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

@pranav-027 in the lines you mentioned, the purpose was to have a space between two texts, and for which using the standard space is the way to go.

But here the requirement is bit different - we are trying to add space between the text and the button which should be ideally done with css like the ones Cailyn mentioned.

Though css will work, I don't know if it's a react-sem-ui way of doing it. But if there are no other solutions, css should be good. Or even the space that you suggested.

@gregorbg looking for your feedback.

<Button onClick={run}>Retry</Button>
</Message>
);
Expand All @@ -58,6 +59,7 @@ export default function DuplicateCheckerHeader({
The computation has been triggered, but we&apos;re waiting for free server capacity.
{' '}
Please check back later.
{' '}
<Button onClick={refetch}>Refresh</Button>
</Message>
);
Expand All @@ -67,6 +69,7 @@ export default function DuplicateCheckerHeader({
return (
<Message info>
Computing Duplicates right now, please check back later.
{' '}
<Button onClick={refetch}>Refresh</Button>
</Message>
);
Expand All @@ -77,6 +80,7 @@ export default function DuplicateCheckerHeader({
<Message positive>
{`Duplicate Checker ran successfully ${
DateTime.fromISO(lastDuplicateCheckerJobRun.end_time).toLocal().toRelative()}.`}
{' '}
<Button onClick={run}>Re-run now</Button>
</Message>
);
Expand All @@ -86,6 +90,7 @@ export default function DuplicateCheckerHeader({
return (
<Message negative>
Something went wrong. Please try running again.
{' '}
<Button onClick={run}>Re-run now</Button>
</Message>
);
Expand All @@ -94,6 +99,7 @@ export default function DuplicateCheckerHeader({
return (
<Message positive>
Duplicate Checker has not yet ran.
{' '}
<Button onClick={run}>Run now</Button>
</Message>
);
Expand Down