From 1901d3193bfc6a9e29d0b7c5389fef44ff9d3687 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Sat, 5 Sep 2026 12:38:44 +0200
Subject: [PATCH] fix: keep the instance user editor popover inside the
 viewport (#10979)

* fix: keep the instance user editor popover inside the viewport

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A5v4NFqdTaZdkR8Ua1nr13

* fix: drop inert flex and min-h-0 classes from the user editor popover

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A5v4NFqdTaZdkR8Ua1nr13

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/InstanceNameEditor.svelte    | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/InstanceNameEditor.svelte b/frontend/src/lib/components/InstanceNameEditor.svelte
index 3b5cce4945..9d21da963c 100644
--- a/frontend/src/lib/components/InstanceNameEditor.svelte
+++ b/frontend/src/lib/components/InstanceNameEditor.svelte
@@ -6,7 +6,6 @@
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
 	import Popover from './meltComponents/Popover.svelte'
-	import { offset, flip, shift } from 'svelte-floating-ui/dom'
 	import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte'
 	import ChangeInstanceEmailInner from './ChangeInstanceEmailInner.svelte'
 	import { UserService } from '$lib/gen'
@@ -53,11 +52,8 @@
 </script>
 
 <Popover
-	floatingConfig={{
-		strategy: 'fixed',
-		placement: 'left-end',
-		middleware: [offset(8), flip(), shift()]
-	}}
+	floatingConfig={{ strategy: 'fixed', placement: 'left-end' }}
+	contentClasses="pt-9"
 	closeButton
 >
 	{#snippet trigger()}
@@ -66,7 +62,10 @@
 		>
 	{/snippet}
 	{#snippet content()}
-		<div class="flex flex-col gap-8 max-w-sm p-4">
+		<!-- The scroll sits here rather than on the popover box, which is what the close button
+		     is positioned against — box-level overflow scrolls that button out of reach. The
+		     box's `pt-9` clears the button's 34px, so the scrollbar starts below it. -->
+		<div class="flex flex-col gap-8 max-w-sm p-4 pt-0 max-h-[70vh] overflow-y-auto">
 			<ChangeInstanceEmailInner
 				{email}
 				{username}