egullickson/motovaultpro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Desktop sidebar clips logo after collapse-mode UX changes #187

New Issue
Closed
opened 2026-02-15 03:31:29 +00:00 by egullickson · 4 comments
egullickson commented 2026-02-15 03:31:29 +00:00
Owner
Copy Link
Copy Source

Severity: Low

Regression Source

Introduced by #176 (chore: add desktop sidebar collapse to icon-only mode)

Problem

The desktop sidebar header (256px wide) clips the MotoVaultPro logo. The full logo text "MOTOVAULTPRO" and slogan "PRECISION VEHICLE MANAGEMENT" are truncated on the right edge, cut off by the collapse chevron button.

Root cause: The logo image has maxWidth: 180 but the available space after accounting for header padding (px: 2 = 32px), gap (gap: 1 = 8px), logo container padding (px: 1 = 16px), and the collapse button (~34px) is only ~166px.

Affected file: frontend/src/components/Layout.tsx (lines 121-159)

Steps to Reproduce

  1. Open MotoVaultPro on desktop
  2. Observe the sidebar in expanded state
  3. Logo text is clipped -- "MOTOVAULTPR" visible, final "O" and slogan are cut off

Expected Behavior

The sidebar width should allow the full logo (text + slogan) to display without clipping alongside the collapse toggle button.

Acceptance Criteria

  • Full "MOTOVAULTPRO" text and "PRECISION VEHICLE MANAGEMENT" slogan visible in expanded sidebar
  • Collapse toggle button remains accessible and properly positioned
  • No layout overflow or horizontal scrollbar in sidebar header
  • Desktop only (mobile layout is unaffected)
  • Tested at 1920px and 1280px desktop viewports
## Severity: Low ## Regression Source Introduced by #176 (chore: add desktop sidebar collapse to icon-only mode) ## Problem The desktop sidebar header (256px wide) clips the MotoVaultPro logo. The full logo text "MOTOVAULTPRO" and slogan "PRECISION VEHICLE MANAGEMENT" are truncated on the right edge, cut off by the collapse chevron button. **Root cause:** The logo image has `maxWidth: 180` but the available space after accounting for header padding (`px: 2` = 32px), gap (`gap: 1` = 8px), logo container padding (`px: 1` = 16px), and the collapse button (~34px) is only ~166px. **Affected file:** `frontend/src/components/Layout.tsx` (lines 121-159) ## Steps to Reproduce 1. Open MotoVaultPro on desktop 2. Observe the sidebar in expanded state 3. Logo text is clipped -- "MOTOVAULTPR" visible, final "O" and slogan are cut off ## Expected Behavior The sidebar width should allow the full logo (text + slogan) to display without clipping alongside the collapse toggle button. ## Acceptance Criteria - [ ] Full "MOTOVAULTPRO" text and "PRECISION VEHICLE MANAGEMENT" slogan visible in expanded sidebar - [ ] Collapse toggle button remains accessible and properly positioned - [ ] No layout overflow or horizontal scrollbar in sidebar header - [ ] Desktop only (mobile layout is unaffected) - [ ] Tested at 1920px and 1280px desktop viewports
egullickson added the
status
backlog
type
bug
 labels 2026-02-15 03:31:35 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-15 03:31:36 +00:00
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-15 03:32:47 +00:00
egullickson commented 2026-02-15 03:40:06 +00:00
Author
Owner
Copy Link
Copy Source

Plan: Fix Desktop Sidebar Logo Clipping

Phase: Planning | Agent: Claude Opus 4.6 | Status: AWAITING_REVIEW (Rev 2 - post QR completeness)

Context

Root Cause Analysis (Codebase Analysis):

  • Logo image motovaultpro-title-slogan.png is 1880x237px (7.94:1 aspect ratio)
  • At height: 24, natural width is ~190px; maxWidth: 180 constrains it to 180px
  • Sidebar header (256px) available space calculation: 256px total - 32px header padding (px:2 = 16px each side) - 8px gap (gap:1) - 34px IconButton (size=small) = 182px for logo area
  • Logo Box with px: 1 (16px padding) + 180px image = 196px, exceeding 182px by 14px
  • overflow: hidden added in #176 (commit bc72f09 on branch issue-162-ux-design-audit-cleanup) clips the overflow, making the bug visible
  • Logo PNG verified: 1880x237px, 67KB, RGBA 8-bit

Decision Critic Verdict: STAND with modifications

  • Flex-based approach (Option A-prime) selected over pixel adjustments or sidebar width changes
  • Key insight: slogan text is ~5px tall and functionally illegible at any sidebar-compatible size; a sidebar-optimized logo is a separate future enhancement

Approach

Use flex-based layout to let the logo Box naturally fill available space, removing hard-coded maxWidth constraints. Remove logo Box internal padding that consumes 16px of valuable space. Keep overflow: hidden as safety net.

Milestones

Milestone 1: Fix logo container flex constraints in Layout.tsx

Branch: issue-187-fix-sidebar-logo-clipping (from issue-162-ux-design-audit-cleanup)
File: frontend/src/components/Layout.tsx

Changes to the logo container Box (lines ~134-157 on branch issue-162-ux-design-audit-cleanup):

  1. Add flex: 1 and minWidth: 0 to logo Box sx -- allows flex parent to allocate remaining space instead of defaulting to content width
  2. Remove px: 1 from logo Box -- eliminates 16px padding that wastes horizontal space
  3. Add px: 0.5 (4px each side) for minimal visual breathing room between logo edge and container
  4. Remove maxWidth: 180 from <img> inline style -- let flex sizing determine width naturally
  5. Add maxWidth: '100%' to <img> -- prevents image from exceeding its flex-allocated container
  6. Keep overflow: hidden on logo Box -- safety net for collapse animation edge cases

Expected result: Logo Box gets ~182px from flex layout. With px:0.5 (8px padding), image fills ~174px at height ~22px. Full "MOTOVAULTPRO" text and slogan visible. No clipping.

Milestone 2: Verify fix across viewports and sidebar states

Expanded sidebar tests (256px width):

  1. At 1920px viewport: Verify full "MOTOVAULTPRO" text and "PRECISION VEHICLE MANAGEMENT" slogan are visible without clipping. Verify collapse chevron button is accessible and properly positioned to the right of logo.
  2. At 1280px viewport: Verify same logo visibility. Sidebar remains 256px fixed width regardless of viewport so behavior should match 1920px.
  3. Verify no horizontal scrollbar appears in sidebar header.

Collapsed sidebar tests (64px width):
4. Click the collapse chevron (<) button to trigger icon-only mode. Verify logo is hidden (conditional rendering {!sidebarCollapsed && ...}).
5. Click expand chevron (>) to return to full sidebar. Verify logo reappears fully visible.
6. Verify collapse/expand animation is smooth with no visual artifacts (logo should not flash or partially render during transition).

Mobile layout:
7. Switch to mobile viewport. Confirm mobile header logo uses separate code path (Tailwind classes h-6 w-auto) and is unaffected by changes.

Automated checks:
8. Run npm run lint -- zero errors
9. Run npm run type-check -- zero errors

Files Changed

File Change Lines
frontend/src/components/Layout.tsx Logo Box: add flex:1, minWidth:0, change px:1 to px:0.5. Img: remove maxWidth:180, add maxWidth:'100%' ~134-157 on branch

Risk Assessment

  • Low risk: Single-file CSS-only change, no logic or state changes
  • No mobile impact: Mobile layout is a completely separate code path (lines 57-97)
  • Reversible: Pure styling change, easily reverted
  • Collapse mode safe: Logo is conditionally hidden when collapsed via {!sidebarCollapsed && ...}, this fix only affects expanded state styling
  • Image verified: PNG dimensions (1880x237) confirmed to support flex layout at sidebar scale

Verdict: AWAITING_REVIEW | Next: QR plan-code review

## Plan: Fix Desktop Sidebar Logo Clipping **Phase**: Planning | **Agent**: Claude Opus 4.6 | **Status**: AWAITING_REVIEW (Rev 2 - post QR completeness) ### Context **Root Cause Analysis (Codebase Analysis):** - Logo image `motovaultpro-title-slogan.png` is 1880x237px (7.94:1 aspect ratio) - At `height: 24`, natural width is ~190px; `maxWidth: 180` constrains it to 180px - Sidebar header (256px) available space calculation: 256px total - 32px header padding (px:2 = 16px each side) - 8px gap (gap:1) - 34px IconButton (size=small) = **182px** for logo area - Logo Box with `px: 1` (16px padding) + 180px image = 196px, exceeding 182px by **14px** - `overflow: hidden` added in #176 (commit `bc72f09` on branch `issue-162-ux-design-audit-cleanup`) clips the overflow, making the bug visible - Logo PNG verified: 1880x237px, 67KB, RGBA 8-bit **Decision Critic Verdict: STAND with modifications** - Flex-based approach (Option A-prime) selected over pixel adjustments or sidebar width changes - Key insight: slogan text is ~5px tall and functionally illegible at any sidebar-compatible size; a sidebar-optimized logo is a separate future enhancement ### Approach Use flex-based layout to let the logo Box naturally fill available space, removing hard-coded maxWidth constraints. Remove logo Box internal padding that consumes 16px of valuable space. Keep `overflow: hidden` as safety net. ### Milestones #### Milestone 1: Fix logo container flex constraints in Layout.tsx **Branch:** `issue-187-fix-sidebar-logo-clipping` (from `issue-162-ux-design-audit-cleanup`) **File:** `frontend/src/components/Layout.tsx` Changes to the logo container Box (lines ~134-157 on branch `issue-162-ux-design-audit-cleanup`): 1. Add `flex: 1` and `minWidth: 0` to logo Box `sx` -- allows flex parent to allocate remaining space instead of defaulting to content width 2. Remove `px: 1` from logo Box -- eliminates 16px padding that wastes horizontal space 3. Add `px: 0.5` (4px each side) for minimal visual breathing room between logo edge and container 4. Remove `maxWidth: 180` from `<img>` inline style -- let flex sizing determine width naturally 5. Add `maxWidth: '100%'` to `<img>` -- prevents image from exceeding its flex-allocated container 6. Keep `overflow: hidden` on logo Box -- safety net for collapse animation edge cases **Expected result:** Logo Box gets ~182px from flex layout. With px:0.5 (8px padding), image fills ~174px at height ~22px. Full "MOTOVAULTPRO" text and slogan visible. No clipping. #### Milestone 2: Verify fix across viewports and sidebar states **Expanded sidebar tests (256px width):** 1. At **1920px viewport**: Verify full "MOTOVAULTPRO" text and "PRECISION VEHICLE MANAGEMENT" slogan are visible without clipping. Verify collapse chevron button is accessible and properly positioned to the right of logo. 2. At **1280px viewport**: Verify same logo visibility. Sidebar remains 256px fixed width regardless of viewport so behavior should match 1920px. 3. Verify no horizontal scrollbar appears in sidebar header. **Collapsed sidebar tests (64px width):** 4. Click the collapse chevron (`<`) button to trigger icon-only mode. Verify logo is hidden (conditional rendering `{!sidebarCollapsed && ...}`). 5. Click expand chevron (`>`) to return to full sidebar. Verify logo reappears fully visible. 6. Verify collapse/expand animation is smooth with no visual artifacts (logo should not flash or partially render during transition). **Mobile layout:** 7. Switch to mobile viewport. Confirm mobile header logo uses separate code path (Tailwind classes `h-6 w-auto`) and is unaffected by changes. **Automated checks:** 8. Run `npm run lint` -- zero errors 9. Run `npm run type-check` -- zero errors ### Files Changed | File | Change | Lines | |------|--------|-------| | `frontend/src/components/Layout.tsx` | Logo Box: add flex:1, minWidth:0, change px:1 to px:0.5. Img: remove maxWidth:180, add maxWidth:'100%' | ~134-157 on branch | ### Risk Assessment - **Low risk**: Single-file CSS-only change, no logic or state changes - **No mobile impact**: Mobile layout is a completely separate code path (lines 57-97) - **Reversible**: Pure styling change, easily reverted - **Collapse mode safe**: Logo is conditionally hidden when collapsed via `{!sidebarCollapsed && ...}`, this fix only affects expanded state styling - **Image verified**: PNG dimensions (1880x237) confirmed to support flex layout at sidebar scale *Verdict*: AWAITING_REVIEW | *Next*: QR plan-code review
egullickson commented 2026-02-15 03:43:12 +00:00
Author
Owner
Copy Link
Copy Source

Plan Review Cycle: Complete

Phase: Plan-Review | Agent: Quality Reviewer + Technical Writer | Status: PASS

Review Results

Review Verdict Notes
QR plan-completeness FAIL (Rev 1) -> PASS (Rev 2) Added detailed viewport test steps, collapse mode testing, math breakdown
TW plan-scrub PASS Plan is clear, precise, and actionable
QR plan-code PASS flex:1 + minWidth:0 is standard CSS solution. RULE 0/1/2 clean.
QR plan-docs PASS CSS-only fix, no documentation updates needed

Findings Addressed in Rev 2

  • Added specific test steps for collapsed/expanded sidebar toggle
  • Added viewport-specific verification (1920px and 1280px)
  • Added full calculation breakdown for the 182px available space math
  • Added image dimension verification note

Verdict: PASS | Next: Execute Milestone 1

## Plan Review Cycle: Complete **Phase**: Plan-Review | **Agent**: Quality Reviewer + Technical Writer | **Status**: PASS ### Review Results | Review | Verdict | Notes | |--------|---------|-------| | QR plan-completeness | FAIL (Rev 1) -> PASS (Rev 2) | Added detailed viewport test steps, collapse mode testing, math breakdown | | TW plan-scrub | PASS | Plan is clear, precise, and actionable | | QR plan-code | PASS | flex:1 + minWidth:0 is standard CSS solution. RULE 0/1/2 clean. | | QR plan-docs | PASS | CSS-only fix, no documentation updates needed | ### Findings Addressed in Rev 2 - Added specific test steps for collapsed/expanded sidebar toggle - Added viewport-specific verification (1920px and 1280px) - Added full calculation breakdown for the 182px available space math - Added image dimension verification note *Verdict*: PASS | *Next*: Execute Milestone 1
egullickson commented 2026-02-15 03:45:21 +00:00
Author
Owner
Copy Link
Copy Source

Milestone 1: Fix logo container flex constraints -- COMPLETE

Phase: Execution | Agent: Claude Opus 4.6 | Status: PASS

Changes Applied

File: frontend/src/components/Layout.tsx (lines 138-159)
Branch: issue-187-fix-sidebar-logo-clipping
Commit: 19cd917

Property Before After Rationale
Logo Box px 1 (16px) 0.5 (8px) Frees 8px for logo content
Logo Box flex (none) 1 Takes available flex space
Logo Box minWidth (none) 0 Allows flex shrink below content size
Img maxWidth 180 (px) '100%' Scales to fit container, not hardcoded

Verification

  • npm run lint -- PASS (only pre-existing warning on line 44, unrelated)
  • npm run type-check -- PASS (zero errors)

Verdict: PASS | Next: Milestone 2 (viewport and sidebar state verification)

## Milestone 1: Fix logo container flex constraints -- COMPLETE **Phase**: Execution | **Agent**: Claude Opus 4.6 | **Status**: PASS ### Changes Applied **File:** `frontend/src/components/Layout.tsx` (lines 138-159) **Branch:** `issue-187-fix-sidebar-logo-clipping` **Commit:** `19cd917` | Property | Before | After | Rationale | |----------|--------|-------|-----------| | Logo Box `px` | `1` (16px) | `0.5` (8px) | Frees 8px for logo content | | Logo Box `flex` | (none) | `1` | Takes available flex space | | Logo Box `minWidth` | (none) | `0` | Allows flex shrink below content size | | Img `maxWidth` | `180` (px) | `'100%'` | Scales to fit container, not hardcoded | ### Verification - `npm run lint` -- PASS (only pre-existing warning on line 44, unrelated) - `npm run type-check` -- PASS (zero errors) *Verdict*: PASS | *Next*: Milestone 2 (viewport and sidebar state verification)
egullickson commented 2026-02-15 03:45:32 +00:00
Author
Owner
Copy Link
Copy Source

Milestone 2: Viewport and sidebar state verification -- PARTIAL

Phase: Execution | Agent: Claude Opus 4.6 | Status: IN_PROGRESS

Automated Checks

  • npm run lint -- PASS
  • npm run type-check -- PASS

Code-Level Verification

  • Logo Box flex:1 + minWidth:0 allows natural flex sizing
  • maxWidth:'100%' on img constrains to container, not hardcoded
  • Collapsed mode: logo conditionally hidden via {!sidebarCollapsed && ...} -- unchanged, no impact
  • Mobile layout: separate code path (lines 57-100) using Tailwind h-6 w-auto -- unchanged
  • Collapse animation: sidebar Paper overflow:hidden preserved -- no impact on transition

Visual Checks (require browser)

  • Expanded sidebar at 1920px -- logo fully visible
  • Expanded sidebar at 1280px -- logo fully visible
  • Collapse/expand toggle works smoothly
  • No horizontal scrollbar in sidebar header

Verdict: IN_PROGRESS | Next: Visual verification by user, then PR

## Milestone 2: Viewport and sidebar state verification -- PARTIAL **Phase**: Execution | **Agent**: Claude Opus 4.6 | **Status**: IN_PROGRESS ### Automated Checks - [x] `npm run lint` -- PASS - [x] `npm run type-check` -- PASS ### Code-Level Verification - [x] Logo Box flex:1 + minWidth:0 allows natural flex sizing - [x] maxWidth:'100%' on img constrains to container, not hardcoded - [x] Collapsed mode: logo conditionally hidden via `{!sidebarCollapsed && ...}` -- unchanged, no impact - [x] Mobile layout: separate code path (lines 57-100) using Tailwind `h-6 w-auto` -- unchanged - [x] Collapse animation: sidebar Paper overflow:hidden preserved -- no impact on transition ### Visual Checks (require browser) - [ ] Expanded sidebar at 1920px -- logo fully visible - [ ] Expanded sidebar at 1280px -- logo fully visible - [ ] Collapse/expand toggle works smoothly - [ ] No horizontal scrollbar in sidebar header *Verdict*: IN_PROGRESS | *Next*: Visual verification by user, then PR
egullickson added
status
review
 and removed
status
in-progress
 labels 2026-02-15 03:45:51 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No labels
status
review
type
bug
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#187