From 7b0b56921475b6c2ba56243edfdf72c0327babb4 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Wed, 9 Sep 2026 10:39:47 +0530
Subject: [PATCH] fix(dashboard): rework the venue picker dropdown

The popover sized itself to its widest row, so a venue whose address is a
Google Maps or Zoom URL stretched the panel across the viewport. Rows now cap
at the trigger width and the existing truncation does the rest.

Add venue and Create Zoom meeting move out of the scrolling list into a static
footer, so both stay reachable however long the venue list gets. Typing
something no venue answers to arms Add Manually and Enter takes it, with the
typed text carried in as the venue name; the "No results" line is gone, since
the armed button already says what happens next.

Enter is prevented on the trigger: its default action clicks whatever the
dialog focuses as it opens, which closed the dialog again.
---
 dashboard/components.d.ts                     |   1 +
 dashboard/src/components/common/ZoomLogo.vue  |  18 +++
 .../dashboard/events/EventLocation.vue        | 103 ++++++++++++------
 .../src/pages/manage/events/CreateEvent.vue   |   2 +-
 4 files changed, 92 insertions(+), 32 deletions(-)
 create mode 100644 dashboard/src/components/common/ZoomLogo.vue

diff --git a/dashboard/components.d.ts b/dashboard/components.d.ts
index 709827f2..cba6a725 100644
--- a/dashboard/components.d.ts
+++ b/dashboard/components.d.ts
@@ -106,5 +106,6 @@ declare module 'vue' {
     UserGroup: typeof import('./src/components/common/UserGroup.vue')['default']
     UserMenu: typeof import('./src/components/UserMenu.vue')['default']
     UserSettingsDialog: typeof import('./src/components/UserSettingsDialog.vue')['default']
+    ZoomLogo: typeof import('./src/components/common/ZoomLogo.vue')['default']
   }
 }
diff --git a/dashboard/src/components/common/ZoomLogo.vue b/dashboard/src/components/common/ZoomLogo.vue
new file mode 100644
index 00000000..1c9545ee
--- /dev/null
+++ b/dashboard/src/components/common/ZoomLogo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ color?: string }>(), { color: "#2196F3" })
+</script>
+
+<template>
+	<svg viewBox="4 4 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M15.9998 28C22.6275 28 28 22.627 28 15.9998C28 9.37249 22.6275 4 15.9998 4C9.37202 4 4 9.37249 4 15.9998C4 22.627 9.37249 28 15.9998 28Z"
+			:fill="color"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M11.0418 19.4297H18.9783V13.6101C18.9783 12.7333 18.2678 12.0228 17.391 12.0228H9.45445V17.8424C9.45445 18.7192 10.165 19.4297 11.0418 19.4297ZM20.036 17.3138L23.2106 19.4297V12.0228L20.0365 14.1392L20.036 17.3138Z"
+			fill="white"
+		/>
+	</svg>
+</template>
diff --git a/dashboard/src/components/dashboard/events/EventLocation.vue b/dashboard/src/components/dashboard/events/EventLocation.vue
index 30303dec..5b12b780 100644
--- a/dashboard/src/components/dashboard/events/EventLocation.vue
+++ b/dashboard/src/components/dashboard/events/EventLocation.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Combobox } from "frappe-ui"
+import { Button, Combobox } from "frappe-ui"
 import { computed, ref, watch } from "vue"
 
+import ZoomLogo from "@/components/common/ZoomLogo.vue"
 import AddVenueDialog from "@/components/dashboard/events/AddVenueDialog.vue"
 import { venues } from "@/data/venues"
 
@@ -22,6 +23,8 @@ const zoomMeeting = defineModel<boolean>("zoomMeeting", { default: false })
 
 const isAdding = ref(false)
 const suggestedName = ref("")
+const isOpen = ref(false)
+const query = ref("")
 
 watch(
 	() => props.team,
@@ -38,41 +41,38 @@ const selected = computed({
 	},
 })
 
-const addVenue = {
-	type: "custom" as const,
-	key: "add-venue",
-	label: "Add venue",
-	icon: "lucide-plus",
-	// Only worth offering once they have typed a name nothing answers to.
-	condition: ({ query }: { query: string }) =>
-		Boolean(query.trim()) &&
-		!(venues.data ?? []).some((row) => row.name.toLowerCase() === query.trim().toLowerCase()),
-	onClick: ({ query }: { query: string }) => {
-		suggestedName.value = query.trim()
-		isAdding.value = true
-	},
+// Nothing answers to what they typed, so Add Manually is the only move left: it is
+// pre-armed, and Enter takes it.
+const unmatched = computed(() => {
+	const text = query.value.trim().toLowerCase()
+	return Boolean(text) && !(venues.data ?? []).some((row) => row.name.toLowerCase().includes(text))
+})
+
+function addManually() {
+	isOpen.value = false
+	suggestedName.value = query.value.trim()
+	isAdding.value = true
+}
+
+function createZoomMeeting() {
+	isOpen.value = false
+	selected.value = ZOOM
 }
 
+// The Zoom row stays out of the list — the footer offers it. It comes back while
+// selected, because the trigger reads its label from a matching option.
+const zoomOption = { label: "Create Zoom meeting", value: ZOOM, icon: "lucide-video" }
+
 const options = computed(() => [
 	{
 		group: "Venues",
-		options: [
-			...(venues.data ?? []).map((row) => ({
-				label: row.name,
-				description: row.address,
-				value: row.name,
-			})),
-			addVenue,
-		],
+		options: (venues.data ?? []).map((row) => ({
+			label: row.name,
+			description: row.address,
+			value: row.name,
+		})),
 	},
-	...(props.showVirtual
-		? [
-				{
-					group: "Virtual",
-					options: [{ label: "Create Zoom meeting", value: ZOOM, icon: "lucide-video" }],
-				},
-			]
-		: []),
+	...(zoomMeeting.value ? [{ group: "Virtual", options: [zoomOption] }] : []),
 ])
 
 async function onVenueCreated(name: string) {
@@ -82,14 +82,55 @@ async function onVenueCreated(name: string) {
 </script>
 
 <template>
+	<!-- Enter is prevented: its default action clicks whatever the dialog focuses as it
+	 opens, which closes the dialog again. -->
 	<Combobox
 		v-model="selected"
+		v-model:open="isOpen"
+		v-model:query="query"
 		:options="options"
 		placeholder="Search venues, or add one"
+		empty-text=""
 		class="w-full"
 		:disabled="disabled"
 		:error="error"
-	/>
+		@keydown.enter.prevent="unmatched && addManually()"
+	>
+		<!-- Rows size the popover, and an address can be a long URL. Cap them near the
+		 trigger width, minus the row's own padding, so the panel stays put. -->
+		<template #item-label="{ item }">
+			<div class="min-w-0 max-w-[calc(var(--reka-combobox-trigger-width)-3rem)]">
+				<div class="truncate">{{ item.label }}</div>
+				<div v-if="item.description" class="truncate text-p-sm text-ink-gray-5">
+					{{ item.description }}
+				</div>
+			</div>
+		</template>
+
+		<template #footer>
+			<div class="flex flex-col gap-1 border-t border-outline-gray-1 p-1">
+				<Button
+					class="w-full !justify-start"
+					:class="unmatched && '!bg-surface-gray-3'"
+					variant="ghost"
+					icon-left="lucide-map-pin-plus"
+					label="Add Manually"
+					@click="addManually()"
+				/>
+				<Button
+					v-if="showVirtual"
+					class="w-full !justify-start"
+					variant="ghost"
+					label="Create Zoom Meeting"
+					@click="createZoomMeeting()"
+				>
+					<template #prefix>
+						<ZoomLogo class="size-4" color="var(--ink-gray-5)" />
+					</template>
+				</Button>
+			</div>
+		</template>
+	</Combobox>
 
 	<AddVenueDialog
 		v-model="isAdding"
diff --git a/dashboard/src/pages/manage/events/CreateEvent.vue b/dashboard/src/pages/manage/events/CreateEvent.vue
index 38738e0a..a178e762 100644
--- a/dashboard/src/pages/manage/events/CreateEvent.vue
+++ b/dashboard/src/pages/manage/events/CreateEvent.vue
@@ -231,7 +231,7 @@ async function save() {
 					v-model:time-zone="timeZone"
 				/>
 
-				<section id="event-location" class="space-y-3">
+				<section id="event-location" class="space-y-1.5">
 					<h2 class="text-sm font-medium uppercase tracking-wide text-ink-gray-5">Where</h2>
 					<EventLocation
 						v-model:venue="venue"