From e12479293d26667bfabe14f30e0b0673c92c48de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Fri, 3 Apr 2026 11:06:58 +0100
Subject: [PATCH] Add descriptions to export dropdown, fix z-index and
 alignment

- 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>
---
 apps/planner/app/components/ExportButton.tsx | 14 ++++++++------
 packages/i18n/src/locales/de.ts              |  2 ++
 packages/i18n/src/locales/en.ts              |  2 ++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/planner/app/components/ExportButton.tsx b/apps/planner/app/components/ExportButton.tsx
index af784d8..f143c09 100644
--- a/apps/planner/app/components/ExportButton.tsx
+++ b/apps/planner/app/components/ExportButton.tsx
@@ -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>
       )}
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
index 14fb3b1..80917ca 100644
--- a/packages/i18n/src/locales/de.ts
+++ b/packages/i18n/src/locales/de.ts
@@ -19,7 +19,9 @@ export default {
     saveRoute: "Route speichern",
     exportGpx: "GPX exportieren",
     exportRoute: "Route exportieren",
+    exportRouteDesc: "GPX-Track für jede App",
     exportPlan: "Plan exportieren",
+    exportPlanDesc: "Mit Wegpunkten und Sperrzonen",
     profile: "Profil",
     connecting: "Verbinde...",
     loadingMap: "Karte wird geladen...",
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
index 482a07e..534bbb2 100644
--- a/packages/i18n/src/locales/en.ts
+++ b/packages/i18n/src/locales/en.ts
@@ -19,7 +19,9 @@ export default {
     saveRoute: "Save Route",
     exportGpx: "Export GPX",
     exportRoute: "Export Route",
+    exportRouteDesc: "Clean GPX track for any app",
     exportPlan: "Export Plan",
+    exportPlanDesc: "Includes waypoints and no-go areas",
     profile: "Profile",
     connecting: "Connecting...",
     loadingMap: "Loading map...",