From 8d8cb90de5eb25be593b0f3a7254183bb5c19f4a Mon Sep 17 00:00:00 2001
From: ChaoticGood007 <zacstraub72@gmail.com>
Date: Tue, 5 May 2026 16:18:35 -0500
Subject: [PATCH] fix: responsive location picker dropdown

---
 CHANGELOG.md                      | 5 +++++
 src/components/LocationPicker.tsx | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc5389c..e2f12e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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
diff --git a/src/components/LocationPicker.tsx b/src/components/LocationPicker.tsx
index 3f7f081..2369da7 100644
--- a/src/components/LocationPicker.tsx
+++ b/src/components/LocationPicker.tsx
@@ -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'
             }`}
           >
@@ -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 
@@ -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>
             )
           })}