trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add descriptions to export dropdown, fix z-index and alignment

Browse source 
- Add description text below each export option explaining the difference
- Fix z-index (z-[1001]) so dropdown renders above the map
- Align dropdown left instead of right to avoid overflow
- Widen dropdown (w-56) to fit descriptions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-03 11:06:58 +01:00
parent 87251ea366
commit e12479293d
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
3 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/planner/app/components/ExportButton.tsx
View file

@ -74,7 +74,7 @@ export function ExportButton({ yjs }: { yjs: YjsState }) {
}, [yjs]);
return (
<div ref={ref} className="relative">
<div ref={ref} className="relative z-[1001]">
<div className="flex">
<button
onClick={handleExportRoute}
@ -90,18 +90,20 @@ export function ExportButton({ yjs }: { yjs: YjsState }) {
</button>
</div>
{open && (
<div className="absolute right-0 top-full z-50 mt-1 w-44 rounded border border-gray-200 bg-white py-1 shadow-lg">
<div className="absolute left-0 top-full z-50 mt-1 w-56 rounded border border-gray-200 bg-white py-1 shadow-lg">
<button
onClick={handleExportRoute}
className="block w-full px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100"
className="block w-full px-3 py-1.5 text-left hover:bg-gray-100"
>
{t("exportRoute")}
<span className="text-sm text-gray-700">{t("exportRoute")}</span>
<span className="block text-xs text-gray-400">{t("exportRouteDesc")}</span>
</button>
<button
onClick={handleExportPlan}
className="block w-full px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100"
className="block w-full px-3 py-1.5 text-left hover:bg-gray-100"
>
{t("exportPlan")}
<span className="text-sm text-gray-700">{t("exportPlan")}</span>
<span className="block text-xs text-gray-400">{t("exportPlanDesc")}</span>
</button>
</div>
)}