Skip to content

Add centered brand to solver header #19

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

Merged
ieroshenko merged 1 commit into from
May 4, 2026
Merged

Add centered brand to solver header #19

Show file tree
Hide file tree
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
32 changes: 23 additions & 9 deletions src/features/problem-solver/components/ProblemSolverHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,26 +44,29 @@ export const ProblemSolverHeader: React.FC<ProblemSolverHeaderProps> = ({

return (
<div className="border-b border-border bg-background p-4 flex-shrink-0">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-4">
<div className="flex min-w-0 items-center space-x-4">
{showNavigation && (
<>
<Button
variant="ghost"
size="sm"
onClick={() => navigate("/problems")}
className="shrink-0"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Back
</Button>
<ProblemSelector
problems={problems}
currentProblemId={problemId}
/>
<div className="min-w-0">
<ProblemSelector
problems={problems}
currentProblemId={problemId}
/>
</div>
</>
)}
<div className="flex items-center space-x-3">
<h1 className="text-xl font-bold text-foreground">
<div className="flex min-w-0 items-center space-x-3">
<h1 className="truncate text-xl font-bold text-foreground">
{problem.title}
</h1>
Comment on lines +69 to 71
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 4, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

h1 needs min-w-0 for truncate to function inside a flex container.

Flex items have min-width: auto by default, so the h1 will never shrink below its text content width. Even though every ancestor flex container has min-w-0, the h1 itself — as a flex item of the space-x-3 row — retains its full content width and truncate's overflow: hidden never fires.

🐛 Proposed fix 
-                        <h1 className="truncate text-xl font-bold text-foreground">
+                        <h1 className="min-w-0 truncate text-xl font-bold text-foreground">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h1 className="truncate text-xl font-bold text-foreground">
{problem.title}
</h1>
<h1 className="min-w-0 truncate text-xl font-bold text-foreground">
{problem.title}
</h1>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/problem-solver/components/ProblemSolverHeader.tsx` around lines
69 - 71, The h1 in ProblemSolverHeader (the element rendering {problem.title})
needs the Tailwind class min-w-0 so truncate can work inside its flex row;
update the h1's className (the <h1 className="truncate text-xl font-bold
text-foreground">) to include min-w-0 (e.g., "min-w-0 truncate ...") so the
element can shrink and trigger overflow truncation.

<Badge className={getDifficultyColor(problem.difficulty)}>
Expand All @@ -75,7 +78,18 @@ export const ProblemSolverHeader: React.FC<ProblemSolverHeaderProps> = ({
</div>
</div>

<div className="flex items-center space-x-2">
<div className="flex items-center justify-center gap-3 whitespace-nowrap">
<img
src="/simplyalgo-logo.png"
alt="SimplyAlgo logo"
className="h-9 w-9 rounded-md object-cover"
/>
<div className="text-2xl font-bold text-foreground">
Simplyalgo.dev
</div>
Comment on lines +82 to +89
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 4, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Inconsistent brand name capitalisation between the alt text and the visible label.

alt="SimplyAlgo logo" (line 84) uses a capital A, while the display text "Simplyalgo.dev" (line 88) uses a lowercase a. Pick one casing and apply it consistently.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/problem-solver/components/ProblemSolverHeader.tsx` around lines
82 - 89, The brand capitalization is inconsistent: the img alt attribute
alt="SimplyAlgo logo" and the visible label "Simplyalgo.dev" should match;
update both occurrences in the ProblemSolverHeader component (the <img> alt
string and the displayed text node) to the same canonical casing (e.g.,
"SimplyAlgo.dev" or "Simplyalgo.dev") so the alt text and visible label are
identical.

</div>

<div className="flex min-w-0 items-center justify-end space-x-2">
<FeedbackButton />
<Timer />
<ShortcutsHelp />
Expand Down
7 changes: 7 additions & 0 deletions src/pages/__tests__/ProblemSolverNew.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,13 @@ describe('ProblemSolverNew', () => {
expect(titles.length).toBeGreaterThan(0);
});

it('should render the Simplyalgo.dev brand and logo in the header', () => {
renderWithRouter(<ProblemSolverNew />);

expect(screen.getByText('Simplyalgo.dev')).toBeInTheDocument();
expect(screen.getByAltText('SimplyAlgo logo')).toBeInTheDocument();
});

it('should render the difficulty badge', () => {
renderWithRouter(<ProblemSolverNew />);

Expand Down
Loading