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) #191

Merged
egullickson merged 1 commits from issue-187-fix-sidebar-logo-clipping into main 2026-02-15 03:51:57 +00:00
Conversation 0 Commits 1 Files Changed 1
+4 -2
egullickson commented 2026-02-15 03:45:45 +00:00
Owner
Copy Link
Copy Source

Fixes #187

Summary

The desktop sidebar header clips the MotoVaultPro logo after the collapse-mode changes in #176. The logo container (196px) exceeded available flex space (182px) by 14px, and overflow: hidden on the logo Box made the clipping visible.

Changes

Single-file CSS fix to frontend/src/components/Layout.tsx:

Property Before After
Logo Box px 1 (16px padding) 0.5 (8px padding)
Logo Box flex (none) 1
Logo Box minWidth (none) 0
Img maxWidth 180 (hardcoded px) '100%' (container-relative)

Approach

Flex-based layout: let the logo Box naturally fill available space instead of fighting fixed pixel constraints. flex: 1 + minWidth: 0 is the standard CSS pattern for flexible content in flex containers.

Test Plan

  • Expanded sidebar (256px): full "MOTOVAULTPRO" text and slogan visible at 1920px
  • Expanded sidebar (256px): full logo visible at 1280px
  • Collapsed sidebar (64px): logo hidden, no artifacts
  • Collapse/expand animation smooth
  • Mobile layout unaffected
  • npm run lint -- PASS
  • npm run type-check -- PASS
Fixes #187 ## Summary The desktop sidebar header clips the MotoVaultPro logo after the collapse-mode changes in #176. The logo container (196px) exceeded available flex space (182px) by 14px, and `overflow: hidden` on the logo Box made the clipping visible. ## Changes Single-file CSS fix to `frontend/src/components/Layout.tsx`: | Property | Before | After | |----------|--------|-------| | Logo Box `px` | `1` (16px padding) | `0.5` (8px padding) | | Logo Box `flex` | (none) | `1` | | Logo Box `minWidth` | (none) | `0` | | Img `maxWidth` | `180` (hardcoded px) | `'100%'` (container-relative) | ## Approach Flex-based layout: let the logo Box naturally fill available space instead of fighting fixed pixel constraints. `flex: 1` + `minWidth: 0` is the standard CSS pattern for flexible content in flex containers. ## Test Plan - [ ] Expanded sidebar (256px): full "MOTOVAULTPRO" text and slogan visible at 1920px - [ ] Expanded sidebar (256px): full logo visible at 1280px - [ ] Collapsed sidebar (64px): logo hidden, no artifacts - [ ] Collapse/expand animation smooth - [ ] Mobile layout unaffected - [x] `npm run lint` -- PASS - [x] `npm run type-check` -- PASS
egullickson added 1 commit 2026-02-15 03:45:46 +00:00
fix: resolve sidebar logo clipping with flex-based layout (refs #187)
Deploy to Staging / Build Images (pull_request) Successful in 4m41s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 52s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 9s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 7s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details
19cd917c66 
Co-Authored-By: Claude Opus 4.6 <[email protected]>
egullickson merged commit 82e8afc215 into main 2026-02-15 03:51:57 +00:00
egullickson deleted branch issue-187-fix-sidebar-logo-clipping 2026-02-15 03:51:58 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
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
Milestone
No items
No Milestone
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#191