From c3df302889fc516d5c3f5630b0651fd983892f59 Mon Sep 17 00:00:00 2001
From: Stephen McMurtry <smcmurtry@gmail.com>
Date: Fri, 5 Jun 2026 14:18:08 +0000
Subject: [PATCH] fix bug where the x position of the sticky footer was
 changing

---
 .../javascripts/stick-to-window-when-scrolling.js      | 10 +++++++---
 app/templates/views/choose-account.html                |  5 +----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/stick-to-window-when-scrolling.js b/app/assets/javascripts/stick-to-window-when-scrolling.js
index 4429ca026a..c81e887c2a 100644
--- a/app/assets/javascripts/stick-to-window-when-scrolling.js
+++ b/app/assets/javascripts/stick-to-window-when-scrolling.js
@@ -1024,10 +1024,14 @@
     $el.css({
       // element will be absolutely positioned so cannot rely on parent element for width
       width: window.innerWidth + "px",
+      // padding-left must align the sticky element's content with the main content area.
+      // The element has CSS margin-left: -gutterHalf which, combined with left: 0 in fixed
+      // positioning, shifts the border-box 15px to the left of the viewport edge.
+      // We compensate by using the main element's actual left offset from the viewport
+      // (via getBoundingClientRect) plus twice the padding to account for both the
+      // main's own left padding and the element's negative margin offset.
       "padding-left":
-        (window.innerWidth - (main.offsetWidth - mainPaddingLeft)) / 2 +
-        mainPaddingLeft +
-        "px",
+        main.getBoundingClientRect().left + 2 * mainPaddingLeft + "px",
     });
   };
   stickAtBottom.stick = function (el) {
diff --git a/app/templates/views/choose-account.html b/app/templates/views/choose-account.html
index 5edf951213..ce96b7c967 100644
--- a/app/templates/views/choose-account.html
+++ b/app/templates/views/choose-account.html
@@ -108,10 +108,7 @@ <h2>
     <div class="js-stick-at-bottom-when-scrolling">
       {% if current_user.has_access_to_live_and_trial_mode_services %}
         <div class="grid-row contain-floats">
-          <div class="md:w-1/4 float-left py-0 px-0 px-gutterHalf box-border">
-            &nbsp;
-          </div>
-          <div class="md:w-3/4 float-left py-0 px-0 px-gutterHalf box-border">
+          <div class="float-left py-0 px-gutterHalf box-border">
       {% endif %}
       <a href="{{ url_for('.add_service') }}" class="button button-secondary">{{ _('Add new service') }}</a>
       {% if current_user.has_access_to_live_and_trial_mode_services %}