From a81e28c1ab27daed2023a597ca7c476d206a7ea7 Mon Sep 17 00:00:00 2001
From: Perplexity <noreply@perplexity.ai>
Date: Sun, 11 Oct 2026 17:31:52 +0000
Subject: [PATCH] Fix WizardStepper positioning drift and modal overflow

- Center the active step using offsetLeft/offsetWidth instead of getBoundingClientRect,
  so repeated or mid-transition centering calls use untransformed layout positions and
  cannot accumulate drift.
- Constrain the stepper to width: 100% with overflow: hidden so its max-content track
  can no longer extend past the modal body into the header/footer area.
- Replace the window-size watcher with a ResizeObserver on the stepper's viewport so
  it re-centers when the modal body resizes for any reason.
---
 src/components/wizard/WizardStepper.vue | 51 ++++++++++++++++---------
 tsconfig.app.tsbuildinfo                |  2 +-
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/wizard/WizardStepper.vue b/src/components/wizard/WizardStepper.vue
index b2af2ee..cf0e8a8 100644
--- a/src/components/wizard/WizardStepper.vue
+++ b/src/components/wizard/WizardStepper.vue
@@ -28,8 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-import { useWindowSize } from "@vueuse/core";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import type { WizardStep } from "../../composables/useProposalWizard";
 
 const props = defineProps<{
@@ -50,6 +49,8 @@ const translateX = ref(0);
 /** Suppresses the transition until the first centering, so the initial position snaps into place. */
 const animated = ref(false);
 
+let resizeObserver: ResizeObserver | null = null;
+
 const setStepRef = (el: Element | any, index: number) => {
   if (el instanceof HTMLElement) {
     stepRefs.set(index, el);
@@ -58,19 +59,19 @@ const setStepRef = (el: Element | any, index: number) => {
   }
 };
 
-/** Centers the current step in the viewport; overflow at the extremities is masked by the fade. */
+/**
+ * Centers the current step in the viewport using untransformed layout math, so repeated or
+ * repeat-triggered calls stay correct while a transition is running.
+ */
 const centerCurrentStep = () => {
   const viewport = viewportRef.value;
-  const track = trackRef.value;
   const step = stepRefs.get(props.current);
-  if (!viewport || !track || !step) return;
-
-  const stepRect = step.getBoundingClientRect();
-  const trackRect = track.getBoundingClientRect();
+  if (!viewport || !step) return;
 
-  // Rects already include the current transform, so adjust from where the step is now.
-  const stepCenter = stepRect.left + stepRect.width / 2 - trackRect.left;
-  translateX.value += viewport.clientWidth / 2 - stepCenter;
+  // offsetLeft is relative to the track (offsetParent), independent of the current transform,
+  // so repeated calls stay correct even while a transition is running
+  const stepCenter = step.offsetLeft + step.offsetWidth / 2;
+  translateX.value = Math.round(viewport.clientWidth / 2 - stepCenter);
 };
 
 const recenter = async (withAnimation: boolean) => {
@@ -90,13 +91,22 @@ const trackStyle = computed(() => ({
       : "none",
 }));
 
-const { width: windowWidth } = useWindowSize();
-
 watch(() => props.current, () => recenter(true));
 watch(() => props.steps, () => recenter(false), { deep: true });
-watch(windowWidth, () => recenter(false));
 
-onMounted(() => recenter(false));
+onMounted(async () => {
+  await recenter(false);
+
+  // Re-center when the modal body resizes (e.g. content loading, window changes)
+  if (viewportRef.value) {
+    resizeObserver = new ResizeObserver(() => recenter(false));
+    resizeObserver.observe(viewportRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
 
 const stepClasses = (index: number) => {
   if (index === props.current) return "text-slate-900 opacity-100";
@@ -113,12 +123,14 @@ const badgeClasses = (index: number) => {
 
 <style scoped>
 .wizard-stepper {
-  /* Single line; steps that overflow are faded out by the mask, so the extremities
-     show nothing rather than a hard clip or a scrollbar */
+  /* Single line that never pushes out of the modal body; overflowing steps are faded
+     by the mask, so the extremities show nothing rather than a hard clip or a scrollbar */
   overflow: hidden;
+  display: block;
+  width: 100%;
   white-space: nowrap;
-  mask-image: linear-gradient(to right, transparent 0, black 18%, black 82%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, transparent 0, black 18%, black 82%, transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, black 20%, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20%, black 80%, transparent 100%);
 }
 
 .wizard-stepper-track {
@@ -132,6 +144,7 @@ const badgeClasses = (index: number) => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
   border-radius: 0.5rem;
   padding: 0.375rem 0.5rem;
   transition: opacity 300ms ease, color 300ms ease, background-color 300ms ease;
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index f417628..a21b3a8 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.ts","./src/vite-env.d.ts","./src/components/icons/index.ts","./src/components/icons/types.ts","./src/composables/useFilterNotifier.ts","./src/composables/useLoading.ts","./src/composables/useModal.ts","./src/composables/useProposalWizard.ts","./src/composables/useSession.ts","./src/generated/typescript/index.ts","./src/generated/typescript/core/ApiError.ts","./src/generated/typescript/core/ApiRequestOptions.ts","./src/generated/typescript/core/ApiResult.ts","./src/generated/typescript/core/CancelablePromise.ts","./src/generated/typescript/core/OpenAPI.ts","./src/generated/typescript/core/request.ts","./src/generated/typescript/models/AddAmendmentRequest.ts","./src/generated/typescript/models/AddCommentRequest.ts","./src/generated/typescript/models/AddProposalRequest.ts","./src/generated/typescript/models/Amendment.ts","./src/generated/typescript/models/AmendmentParagraph.ts","./src/generated/typescript/models/AmendmentStatus.ts","./src/generated/typescript/models/AmendmentVote.ts","./src/generated/typescript/models/AmendmentWithParagraphs.ts","./src/generated/typescript/models/AmendmentWithSummary.ts","./src/generated/typescript/models/Claims.ts","./src/generated/typescript/models/CommentReaction.ts","./src/generated/typescript/models/CommentReactionSummary.ts","./src/generated/typescript/models/CommentWithUser.ts","./src/generated/typescript/models/EditProposalRequest.ts","./src/generated/typescript/models/FreighterLoginRequest.ts","./src/generated/typescript/models/FreighterLoginResponse.ts","./src/generated/typescript/models/ListCommentsResponse.ts","./src/generated/typescript/models/LoginRequest.ts","./src/generated/typescript/models/Organization.ts","./src/generated/typescript/models/Proposal.ts","./src/generated/typescript/models/ProposalParagraph.ts","./src/generated/typescript/models/ProposalParagraphRequest.ts","./src/generated/typescript/models/ProposalRevision.ts","./src/generated/typescript/models/ProposalRevisionBlock.ts","./src/generated/typescript/models/ProposalSponsor.ts","./src/generated/typescript/models/ProposalState.ts","./src/generated/typescript/models/ProposalVote.ts","./src/generated/typescript/models/ProposalWithParagraphs.ts","./src/generated/typescript/models/ProposalWithSummary.ts","./src/generated/typescript/models/ReactCommentRequest.ts","./src/generated/typescript/models/ReactCommentResponse.ts","./src/generated/typescript/models/ReactionType.ts","./src/generated/typescript/models/RegisterOrganizationRequest.ts","./src/generated/typescript/models/RegisterRequest.ts","./src/generated/typescript/models/RegisteredUser.ts","./src/generated/typescript/models/SelectableAmendment.ts","./src/generated/typescript/models/SelectableComment.ts","./src/generated/typescript/models/SelectableProposal.ts","./src/generated/typescript/models/SetProposalRevisionRequest.ts","./src/generated/typescript/models/SponsorProposalRequest.ts","./src/generated/typescript/models/UserAmendmentVote.ts","./src/generated/typescript/models/UserProposalVotes.ts","./src/generated/typescript/models/VoteAmendmentRequest.ts","./src/generated/typescript/models/VoteAmendmentResponse.ts","./src/generated/typescript/models/VoteChoice.ts","./src/generated/typescript/models/VoteProposalRequest.ts","./src/generated/typescript/schemas/$AddProposalRequest.ts","./src/generated/typescript/schemas/$FreighterLoginRequest.ts","./src/generated/typescript/schemas/$ListProposalsResponse.ts","./src/generated/typescript/schemas/$LoginRequest.ts","./src/generated/typescript/schemas/$ProposalItem.ts","./src/generated/typescript/schemas/$ProposalList.ts","./src/generated/typescript/schemas/$RegisterRequest.ts","./src/generated/typescript/schemas/$VisitProposalRequest.ts","./src/generated/typescript/services/AmendmentService.ts","./src/generated/typescript/services/AuthService.ts","./src/generated/typescript/services/CommentService.ts","./src/generated/typescript/services/OrganizationService.ts","./src/generated/typescript/services/ProposalService.ts","./src/router/index.ts","./src/stores/filterStore.ts","./src/types/color.ts","./src/types/comment.ts","./src/types/dropdown.ts","./src/types/headerletter.ts","./src/types/proposal.ts","./src/types/proposalWizard.ts","./src/types/user.ts","./src/types/vote.ts","./src/utils/amendment.ts","./src/utils/auth.ts","./src/utils/comments.ts","./src/utils/eventBus.ts","./src/utils/markdown.ts","./src/utils/proposalExport.ts","./src/utils/wallet.ts","./src/App.vue","./src/components/AmendmentCarousel.vue","./src/components/BrandBar.vue","./src/components/Chip.vue","./src/components/ColoredHeader.vue","./src/components/CommentThread.vue","./src/components/Dropdown.vue","./src/components/LoadingSpinner.vue","./src/components/PostBuilder.vue","./src/components/ProposalContainer.vue","./src/components/ProposalDetail.vue","./src/components/ProposalEmptyState.vue","./src/components/ProposalExportCard.vue","./src/components/ProposalRevisionDropdown.vue","./src/components/ProposalSponsorCard.vue","./src/components/ProposalVotingCard.vue","./src/components/Sidebar.vue","./src/components/Thread.vue","./src/components/icons/Abstain.vue","./src/components/icons/AppIcon.vue","./src/components/icons/Arrow.vue","./src/components/icons/Cancel.vue","./src/components/icons/Confirm.vue","./src/components/icons/DownArrow.vue","./src/components/icons/Download.vue","./src/components/icons/Filter.vue","./src/components/icons/IconBase.vue","./src/components/icons/Identification.vue","./src/components/icons/Menu.vue","./src/components/icons/Plus.vue","./src/components/icons/SpeechBubbles.vue","./src/components/icons/Stack.vue","./src/components/icons/ThumbsDown.vue","./src/components/icons/ThumbsUp.vue","./src/components/modals/AmendmentModal.vue","./src/components/modals/EditProposalModal.vue","./src/components/modals/FilterModal.vue","./src/components/modals/Modal.vue","./src/components/modals/NewAmendmentModal.vue","./src/components/modals/ProposalWizardModal.vue","./src/components/modals/RegistrationModal.vue","./src/components/wizard/ListInput.vue","./src/components/wizard/WizardBasicsStep.vue","./src/components/wizard/WizardDecisionStep.vue","./src/components/wizard/WizardFundingStep.vue","./src/components/wizard/WizardNarrativeStep.vue","./src/components/wizard/WizardPolicyStep.vue","./src/components/wizard/WizardReviewStep.vue","./src/components/wizard/WizardScopeStep.vue","./src/components/wizard/WizardStepper.vue","./src/views/HomeView.vue","./src/views/ProposalView.vue"],"version":"5.9.2"}
\ No newline at end of file
+{"root":["./src/main.ts","./src/vite-env.d.ts","./src/components/icons/index.ts","./src/components/icons/types.ts","./src/composables/useFilterNotifier.ts","./src/composables/useLoading.ts","./src/composables/useModal.ts","./src/composables/useProposalWizard.ts","./src/composables/useSession.ts","./src/generated/typescript/index.ts","./src/generated/typescript/core/ApiError.ts","./src/generated/typescript/core/ApiRequestOptions.ts","./src/generated/typescript/core/ApiResult.ts","./src/generated/typescript/core/CancelablePromise.ts","./src/generated/typescript/core/OpenAPI.ts","./src/generated/typescript/core/request.ts","./src/generated/typescript/models/AddAmendmentRequest.ts","./src/generated/typescript/models/AddCommentRequest.ts","./src/generated/typescript/models/AddProposalRequest.ts","./src/generated/typescript/models/Amendment.ts","./src/generated/typescript/models/AmendmentParagraph.ts","./src/generated/typescript/models/AmendmentStatus.ts","./src/generated/typescript/models/AmendmentVote.ts","./src/generated/typescript/models/AmendmentWithParagraphs.ts","./src/generated/typescript/models/AmendmentWithSummary.ts","./src/generated/typescript/models/Claims.ts","./src/generated/typescript/models/CommentReaction.ts","./src/generated/typescript/models/CommentReactionSummary.ts","./src/generated/typescript/models/CommentTargetType.ts","./src/generated/typescript/models/CommentWithUser.ts","./src/generated/typescript/models/EditProposalRequest.ts","./src/generated/typescript/models/FreighterLoginRequest.ts","./src/generated/typescript/models/FreighterLoginResponse.ts","./src/generated/typescript/models/FundingTypeData.ts","./src/generated/typescript/models/ListCommentsResponse.ts","./src/generated/typescript/models/LoginRequest.ts","./src/generated/typescript/models/MoneyAmount.ts","./src/generated/typescript/models/Organization.ts","./src/generated/typescript/models/PolicyTypeData.ts","./src/generated/typescript/models/Proposal.ts","./src/generated/typescript/models/ProposalCommonData.ts","./src/generated/typescript/models/ProposalEvent.ts","./src/generated/typescript/models/ProposalEventType.ts","./src/generated/typescript/models/ProposalMilestone.ts","./src/generated/typescript/models/ProposalParagraph.ts","./src/generated/typescript/models/ProposalParagraphRequest.ts","./src/generated/typescript/models/ProposalRevision.ts","./src/generated/typescript/models/ProposalRevisionBlock.ts","./src/generated/typescript/models/ProposalRevisionStatus.ts","./src/generated/typescript/models/ProposalRisk.ts","./src/generated/typescript/models/ProposalScope.ts","./src/generated/typescript/models/ProposalSponsor.ts","./src/generated/typescript/models/ProposalState.ts","./src/generated/typescript/models/ProposalVote.ts","./src/generated/typescript/models/ProposalWithParagraphs.ts","./src/generated/typescript/models/ProposalWithSummary.ts","./src/generated/typescript/models/ReactCommentRequest.ts","./src/generated/typescript/models/ReactCommentResponse.ts","./src/generated/typescript/models/ReactionType.ts","./src/generated/typescript/models/RegisterOrganizationRequest.ts","./src/generated/typescript/models/RegisterRequest.ts","./src/generated/typescript/models/RegisteredUser.ts","./src/generated/typescript/models/SelectableAmendment.ts","./src/generated/typescript/models/SelectableComment.ts","./src/generated/typescript/models/SelectableProposal.ts","./src/generated/typescript/models/SetProposalRevisionRequest.ts","./src/generated/typescript/models/SponsorProposalRequest.ts","./src/generated/typescript/models/UserAmendmentVote.ts","./src/generated/typescript/models/UserProposalVotes.ts","./src/generated/typescript/models/VoteAmendmentRequest.ts","./src/generated/typescript/models/VoteAmendmentResponse.ts","./src/generated/typescript/models/VoteChoice.ts","./src/generated/typescript/models/VoteProposalRequest.ts","./src/generated/typescript/schemas/$AddProposalRequest.ts","./src/generated/typescript/schemas/$FreighterLoginRequest.ts","./src/generated/typescript/schemas/$ListProposalsResponse.ts","./src/generated/typescript/schemas/$LoginRequest.ts","./src/generated/typescript/schemas/$ProposalItem.ts","./src/generated/typescript/schemas/$ProposalList.ts","./src/generated/typescript/schemas/$RegisterRequest.ts","./src/generated/typescript/schemas/$VisitProposalRequest.ts","./src/generated/typescript/services/AmendmentService.ts","./src/generated/typescript/services/AuthService.ts","./src/generated/typescript/services/CommentService.ts","./src/generated/typescript/services/OrganizationService.ts","./src/generated/typescript/services/ProposalService.ts","./src/router/index.ts","./src/stores/filterStore.ts","./src/types/color.ts","./src/types/comment.ts","./src/types/dropdown.ts","./src/types/headerletter.ts","./src/types/proposal.ts","./src/types/proposalWizard.ts","./src/types/user.ts","./src/types/vote.ts","./src/utils/amendment.ts","./src/utils/auth.ts","./src/utils/comments.ts","./src/utils/eventBus.ts","./src/utils/markdown.ts","./src/utils/proposalExport.ts","./src/utils/wallet.ts","./src/App.vue","./src/components/AmendmentCarousel.vue","./src/components/BrandBar.vue","./src/components/Chip.vue","./src/components/ColoredHeader.vue","./src/components/CommentThread.vue","./src/components/Dropdown.vue","./src/components/LoadingSpinner.vue","./src/components/PostBuilder.vue","./src/components/ProposalContainer.vue","./src/components/ProposalDetail.vue","./src/components/ProposalEmptyState.vue","./src/components/ProposalExportCard.vue","./src/components/ProposalRevisionDropdown.vue","./src/components/ProposalSponsorCard.vue","./src/components/ProposalVotingCard.vue","./src/components/Sidebar.vue","./src/components/Thread.vue","./src/components/icons/Abstain.vue","./src/components/icons/AppIcon.vue","./src/components/icons/Arrow.vue","./src/components/icons/Cancel.vue","./src/components/icons/Confirm.vue","./src/components/icons/DownArrow.vue","./src/components/icons/Download.vue","./src/components/icons/Filter.vue","./src/components/icons/IconBase.vue","./src/components/icons/Identification.vue","./src/components/icons/Menu.vue","./src/components/icons/Plus.vue","./src/components/icons/SpeechBubbles.vue","./src/components/icons/Stack.vue","./src/components/icons/ThumbsDown.vue","./src/components/icons/ThumbsUp.vue","./src/components/modals/AmendmentModal.vue","./src/components/modals/EditProposalModal.vue","./src/components/modals/FilterModal.vue","./src/components/modals/Modal.vue","./src/components/modals/NewAmendmentModal.vue","./src/components/modals/ProposalWizardModal.vue","./src/components/modals/RegistrationModal.vue","./src/components/wizard/ListInput.vue","./src/components/wizard/WizardBasicsStep.vue","./src/components/wizard/WizardDecisionStep.vue","./src/components/wizard/WizardFundingStep.vue","./src/components/wizard/WizardNarrativeStep.vue","./src/components/wizard/WizardPolicyStep.vue","./src/components/wizard/WizardReviewStep.vue","./src/components/wizard/WizardScopeStep.vue","./src/components/wizard/WizardStepper.vue","./src/views/HomeView.vue","./src/views/ProposalView.vue"],"version":"5.9.2"}
\ No newline at end of file