Conversation
Collaborator
Nvirs
commented
Jan 16, 2026
Nvirs
commented
There was a problem hiding this comment.
Pull request overview
This pull request aims to optimize the navigation UI by adjusting button padding and icon sizes for improved visual consistency and touch targets on smaller screens.
Changes:
- Increased horizontal padding from
px-1.5topx-2.5for most navigation buttons (except Recurring) - Increased vertical padding from
py-1topy-2(orpy-3for Dashboard) for all navigation buttons - Increased icon sizes from
h-3 w-3toh-4 w-4for better visibility on smaller screens - Adjusted privacy toggle padding and icon sizes for consistency
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
434
to
507
| <div className="flex gap-0.5 sm:gap-1 p-0.5 sm:p-1 rounded-lg sm:rounded-xl bg-secondary/50 border border-border/50"> | ||
| <button | ||
| onClick={() => setView('dashboard')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-2.5 lg:px-3 py-3 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| view === 'dashboard' | ||
| ? 'bg-primary text-primary-foreground shadow-sm' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-background/50' | ||
| }`} | ||
| > | ||
| <List className="h-3 w-3 lg:h-3.5 lg:w-3.5" /> | ||
| <List className="h-4 w-4 lg:h-3.5 lg:w-3.5" /> | ||
| <span className="hidden lg:inline">Dashboard</span> | ||
| </button> | ||
| <button | ||
| onClick={() => setView('analytics')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-2.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| view === 'analytics' | ||
| ? 'bg-primary text-primary-foreground shadow-sm' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-background/50' | ||
| }`} | ||
| > | ||
| <BarChart3 className="h-3 w-3 lg:h-3.5 lg:w-3.5" /> | ||
| <BarChart3 className="h-4 w-4 lg:h-3.5 lg:w-3.5" /> | ||
| <span className="hidden lg:inline">Analytics</span> | ||
| </button> | ||
| <button | ||
| onClick={() => setView('investments')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-2.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| view === 'investments' | ||
| ? 'bg-primary text-primary-foreground shadow-sm' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-background/50' | ||
| }`} | ||
| > | ||
| <LineChart className="h-3 w-3 lg:h-3.5 lg:w-3.5" /> | ||
| <LineChart className="h-4 w-4 lg:h-3.5 lg:w-3.5" /> | ||
| <span className="hidden lg:inline">Investments</span> | ||
| </button> | ||
| <button | ||
| onClick={() => setView('recurring')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-1.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| view === 'recurring' | ||
| ? 'bg-primary text-primary-foreground shadow-sm' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-background/50' | ||
| }`} | ||
| > | ||
| <RefreshCw className="h-3 w-3 lg:h-3.5 lg:w-3.5" /> | ||
| <RefreshCw className="h-4 w-4 lg:h-3.5 lg:w-3.5" /> | ||
| <span className="hidden lg:inline">Recurring</span> | ||
| </button> | ||
| <button | ||
| onClick={() => setView('settings')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-2.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| view === 'settings' | ||
| ? 'bg-primary text-primary-foreground shadow-sm' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-background/50' | ||
| }`} | ||
| > | ||
| <SettingsIcon className="h-3 w-3 lg:h-3.5 lg:w-3.5" /> | ||
| <SettingsIcon className="h-4 w-4 lg:h-3.5 lg:w-3.5" /> | ||
| <span className="hidden lg:inline">Settings</span> | ||
| </button> | ||
| </div> | ||
| {/* Privacy Toggle */} | ||
| <button | ||
| onClick={togglePrivacyMode} | ||
| className={`p-1.5 lg:p-2 rounded-md lg:rounded-lg transition-all ${ | ||
| className={`p-2 lg:p-2 rounded-md lg:rounded-lg transition-all ${ | ||
| privacyMode === 'hidden' | ||
| ? 'bg-primary/10 text-primary' | ||
| : 'text-muted-foreground hover:text-foreground hover:bg-background/50' | ||
| }`} | ||
| title={privacyMode === 'hidden' ? 'Show values' : 'Hide values'} | ||
| > | ||
| {privacyMode === 'hidden' ? ( | ||
| <EyeOff className="h-3.5 w-3.5 lg:h-4 lg:w-4" /> | ||
| <EyeOff className="h-4 w-4 lg:h-4 lg:w-4" /> | ||
| ) : ( | ||
| <Eye className="h-3.5 w-3.5 lg:h-4 lg:w-4" /> | ||
| <Eye className="h-4 w-4 lg:h-4 lg:w-4" /> | ||
| )} | ||
| </button> | ||
| <div className="hidden lg:flex items-center gap-2"> |
There was a problem hiding this comment.
The PR title contains a spelling error: "optimazing" should be "optimizing".
| <button | ||
| onClick={() => setView('dashboard')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-2.5 lg:px-3 py-3 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ |
There was a problem hiding this comment.
Inconsistent vertical padding on the Dashboard button. The Dashboard button uses py-3 while all other navigation buttons (Analytics, Investments, Recurring, Settings) use py-2. This inconsistency will make the Dashboard button appear taller than the others, creating visual imbalance in the navigation bar. Consider changing py-3 to py-2 to match the other buttons.
Suggested change
| className={`px-2.5 lg:px-3 py-3 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | |
| className={`px-2.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ |
| <button | ||
| onClick={() => setView('recurring')} | ||
| className={`px-1.5 lg:px-3 py-1 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | ||
| className={`px-1.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ |
There was a problem hiding this comment.
Inconsistent horizontal padding on the Recurring button. The Recurring button uses px-1.5 while all other navigation buttons (Dashboard, Analytics, Investments, Settings) use px-2.5. This inconsistency will make the Recurring button appear narrower than the others, creating visual imbalance in the navigation bar. Consider changing px-1.5 to px-2.5 to match the other buttons.
Suggested change
| className={`px-1.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ | |
| className={`px-2.5 lg:px-3 py-2 lg:py-1.5 text-xs font-medium rounded-md lg:rounded-lg transition-all flex items-center gap-1 lg:gap-1.5 ${ |
31b4
approved these changes
Jan 17, 2026
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.