Skip to content

fix: raise mobile sidebar touch targets to 44px minimum #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
atomantic merged 1 commit into from
Sep 21, 2026
Merged

fix: raise mobile sidebar touch targets to 44px minimum #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .changelog/NEXT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@

## Fixed

- **[issue-177] Mobile sidebar touch targets meet 44px minimum** — Primary navigation links, database expanders, the drawer close button, and the theme toggle in the mobile sidebar now render at a 44x44px minimum, matching the hamburger button, instead of the previous 40px.
- **[issue-163] Provider operation failures stay actionable** — Browser connection and provider scraper failures now surface as recoverable errors instead of being reported as a logged-out session or an empty tree list.
- **[issue-162] Provider refresh page cleanup** — Provider comparison refreshes now close their temporary browser page even when Ancestry navigation or scraping fails, preventing failed retries from accumulating pages in the shared browser.
- Nominatim geocoding requests now time out after 15 seconds and are cancelled when their map-stream client disconnects, preventing stalled upstream sockets from blocking the shared geocoding queue.
Expand Down
8 changes: 4 additions & 4 deletions client/src/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function Sidebar() {
};

const navLinkClasses = (path: string, indent = false) => `
flex items-center gap-3 py-2 min-h-[40px] rounded-lg transition-colors
flex items-center gap-3 py-2 min-h-[44px] rounded-lg transition-colors
${isActive(path)
? 'bg-app-accent text-app-text'
: 'text-app-text-muted hover:bg-app-hover hover:text-app-text'
Expand Down Expand Up @@ -111,7 +111,7 @@ export function Sidebar() {
<button
onClick={() => toggleDatabaseExpanded(db.id)}
className={`
w-full min-w-0 flex items-center gap-2 py-2 min-h-[40px] rounded-lg transition-colors
w-full min-w-0 flex items-center gap-2 py-2 min-h-[44px] rounded-lg transition-colors
${isDbActive
? 'text-app-text bg-app-hover'
: 'text-app-text-muted hover:bg-app-hover hover:text-app-text'
Expand Down Expand Up @@ -183,7 +183,7 @@ export function Sidebar() {
{/* Mobile close button - inside header */}
<button
onClick={closeMobile}
className="min-h-[40px] min-w-[40px] flex items-center justify-center rounded-lg text-app-text-muted hover:bg-app-hover hover:text-app-text md:hidden"
className="min-h-[44px] min-w-[44px] flex items-center justify-center rounded-lg text-app-text-muted hover:bg-app-hover hover:text-app-text md:hidden"
aria-label="Close menu"
>
<X size={18} />
Expand Down Expand Up @@ -235,7 +235,7 @@ export function Sidebar() {
<button
onClick={toggleTheme}
className={`
flex items-center gap-3 py-2 rounded-lg transition-colors w-full
flex items-center gap-3 py-2 min-h-[44px] rounded-lg transition-colors w-full
text-app-text-muted hover:bg-app-hover hover:text-app-text
${isCollapsed ? 'justify-center px-2' : 'px-3'}
`}
Expand Down
Loading