Fixed: logo misalignment in narrow terminal windows using breakpoints #4
Conversation
|
@AbhiArya20 is attempting to deploy a commit to the Kartik Labhshetwar's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@AbhiArya20 a screenshot or video will be really helpful |
|
Large: Medium: Small: |
can you give me a video demo. just check if everything is working or not? |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes logo misalignment in narrow terminal windows by introducing responsive breakpoints for the ASCII logo display. The changes extract logo rendering logic into a dedicated utility module with three different logo variants that adapt to terminal width.
- Extracted ASCII logo rendering into a separate utility module with responsive breakpoints
- Added gradient-string dependency for enhanced visual styling
- Implemented three logo variants (full, multi-line, mini) that adapt to terminal width
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/utils/render-title.ts | New utility module containing responsive logo rendering logic with three ASCII logo variants and gradient styling |
| src/commands/lazycommit.ts | Removed hardcoded ASCII logo and replaced with call to new renderTitle utility function |
| package.json | Added gradient-string dependency for logo styling |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| function getTitle(width: number): string { | ||
| if (width > 100) return ASCII_LOGO; | ||
| if (width > 55) return ASCII_LOGO_MULTI_LINE; | ||
| return ASCII_LOGO_MINI; | ||
| } |
There was a problem hiding this comment.
The breakpoint values 100 and 55 are magic numbers that should be extracted as named constants to improve maintainability and make the layout logic more explicit.
Copilot uses AI. Check for mistakes.
| } | ||
|
|
||
| export const renderTitle = () => { | ||
| const terminalWidth = process.stdout.columns || 55; |
There was a problem hiding this comment.
The fallback value 55 is a magic number that should be extracted as a named constant. This value appears to correspond to one of the breakpoints and should be clearly documented.
Copilot uses AI. Check for mistakes.
|
I'm not using Instead, this solution handles the initial rendering of the title cleanly on smaller terminal windows. Screencast.from.2025-09-26.22-55-38.webm |
The logo was previously misaligned and distorted on smaller terminal window sizes.
Introduced three layout breakpoints to ensure consistent rendering across a range of terminal widths.