Skip to content

fix: location picker dropdown width #23

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
ChaoticGood007 merged 1 commit into from
May 5, 2026
Merged

fix: location picker dropdown width #23

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
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [0.5.1] - 2026-05-05

### Fixed
- Fixed an issue where the location picker dropdown in the disc edit screen had a fixed width, causing longer location names to be truncated and unreadable. The dropdown now intelligently expands to fit the location names up to a reasonable max width.

## [0.5.0] - 2026-04-25

### Added
Expand Down
8 changes: 4 additions & 4 deletions src/components/LocationPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,14 @@ export default function LocationPicker({ tree, value, onChange, className = '' }
</button>

{/* Dropdown */}
<div className={`absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-2xl border border-slate-100 z-50 overflow-hidden transition-all duration-200 ease-out origin-top ${
<div className={`absolute top-full left-0 min-w-full w-max max-w-[90vw] sm:max-w-md mt-2 bg-white rounded-2xl shadow-2xl border border-slate-100 z-50 overflow-hidden transition-all duration-200 ease-out origin-top ${
open ? 'opacity-100 scale-100 pointer-events-auto' : 'opacity-0 scale-95 pointer-events-none'
}`}>
<div className="max-h-56 overflow-y-auto p-2 space-y-0.5">
<button
type="button"
onClick={() => select(null)}
className={`w-full text-left px-3 py-2.5 rounded-xl text-sm font-bold flex items-center gap-2 transition-colors ${
className={`w-full text-left px-3 py-2.5 rounded-xl text-sm font-bold flex items-center gap-2 transition-colors whitespace-nowrap ${
!value ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50'
}`}
>
Expand All @@ -123,7 +123,7 @@ export default function LocationPicker({ tree, value, onChange, className = '' }
type="button"
disabled={!isLeaf}
onClick={() => select(loc)}
className={`w-full text-left px-3 py-2.5 rounded-xl text-sm font-bold flex items-center gap-2 transition-colors ${
className={`w-full text-left px-3 py-2.5 rounded-xl text-sm font-bold flex items-center gap-2 transition-colors whitespace-nowrap ${
value === loc.value
? 'bg-indigo-50 text-indigo-600'
: isLeaf
Expand All @@ -136,7 +136,7 @@ export default function LocationPicker({ tree, value, onChange, className = '' }
: <span className="w-3.5 h-3.5 shrink-0" />
}
<span className="truncate">{loc.path}</span>
{!isLeaf && <span className="text-[9px] uppercase tracking-tighter font-black opacity-40 ml-auto">Folder</span>}
{!isLeaf && <span className="text-[9px] uppercase tracking-tighter font-black opacity-40 ml-auto pl-4">Folder</span>}
</button>
)
})}
Expand Down
Loading