Jiseoup/showmycodePublic
EN|KO
  • Code
  • Commits
  • Pull Requests
← Back to list
Merged

feat: add mobile responsive layout with sidebar drawer

#6
JiseoupJiseoup · Apr 10, 2026feat/mobile-responsive → main
feat
OverviewCommitsFiles changed

Related Issue

N/A

Changes

  • Add SidebarDrawer client component that renders the file tree as a slide-in overlay drawer on mobile and a fixed sidebar column on desktop (md: breakpoint)
  • Remove hardcoded w-64 shrink-0 from Sidebar — width is now owned by SidebarDrawer
  • Apply responsive padding (px-3 md:px-6) across repo layout, commits, pulls, and home pages
  • Truncate long branch ref strings in pulls list to prevent horizontal overflow
  • Add flex-wrap to pagination containers for narrow viewports

How to Verify

  1. Open the app in Chrome DevTools with a mobile viewport (e.g. iPhone 12 Pro, 390px)
  2. Navigate to a repository — sidebar should be hidden, "Files" button visible at top of content area
  3. Tap "Files" → drawer slides in with dark overlay
  4. Tap the overlay → drawer closes
  5. Select a file from the drawer → file content renders in the main area
  6. Switch to desktop viewport (≥ 768px) — sidebar always visible, no toggle button shown
  7. Check the pulls/commits pages — long branch names are truncated, pagination doesn't overflow

Checklist

  • npm run build passes
  • npm run lint passes