Limit ticket: sticky PLACE LIMIT footer overlaps/bleeds through form content until scrolled to bottom #500

New issue

Closed

opened 2026-07-18 15:32:29 +00:00 by leonardocolucci · 11 comments

leonardocolucci commented

2026-07-18 15:32:29 +00:00

(Migrated from gitlab.com)

Summary

The sticky PLACE LIMIT footer on the limit-order ticket overlaps and bleeds through the form content underneath it until the panel is scrolled to the bottom. Keeping the CTA pinned is clearly intentional and good — but the pinned state renders on top of live form controls with a semi-transparent background, so it reads as a glitch and hides inputs.

Same class of bug as #482 (sticky header bleed), different element.

Observed (desktop Chrome, EMBER/CORAL limit buy)

At scroll-top: the pinned PLACE LIMIT button covers the EXPIRY chips (NO EXPIRY / 24H / 7D are half-visible behind it) and the error banner ("Buy limits must be below the reference price.") sits directly on top of the dd/mm/yyyy date input, with both texts blending:

Mid-scroll: the ADVANCED summary rows are readable through the button and banner — "MAKER FEE 0.040%" and the GAS row bleed through:

Once fully scrolled, the footer settles into its natural in-flow position above MY OPEN LIMITS and everything looks correct — which is why this is easy to miss in QA.

Suggested fix

Give the sticky footer an opaque (or blurred/backdrop-filter) background consistent with the glass theme, so content never shows through the CTA or the error banner.
Add padding-bottom (≈ footer height) to the ticket's scroll container so the last controls (EXPIRY, date picker, ADVANCED) can scroll clear of the pinned footer instead of being covered by it.
Consider keeping the validation error banner in normal document flow (or above the button inside the footer with the same opaque background) so it never obscures the input it refers to.

## Summary The sticky PLACE LIMIT footer on the limit-order ticket overlaps and bleeds through the form content underneath it until the panel is scrolled to the bottom. Keeping the CTA pinned is clearly intentional and good — but the pinned state renders on top of live form controls with a semi-transparent background, so it reads as a glitch and hides inputs. Same class of bug as #482 (sticky header bleed), different element. ## Observed (desktop Chrome, EMBER/CORAL limit buy) **At scroll-top:** the pinned PLACE LIMIT button covers the EXPIRY chips (NO EXPIRY / 24H / 7D are half-visible behind it) and the error banner ("Buy limits must be below the reference price.") sits directly on top of the `dd/mm/yyyy` date input, with both texts blending: ![f001](/uploads/8398407487e456f02150b2aa67e9c11f/f001.png) **Mid-scroll:** the ADVANCED summary rows are readable *through* the button and banner — "MAKER FEE 0.040%" and the GAS row bleed through: ![f004](/uploads/961363dab324d8b1c535349357737b17/f004.png) Once fully scrolled, the footer settles into its natural in-flow position above MY OPEN LIMITS and everything looks correct — which is why this is easy to miss in QA. ## Suggested fix 1. Give the sticky footer an opaque (or blurred/backdrop-filter) background consistent with the glass theme, so content never shows through the CTA or the error banner. 2. Add `padding-bottom` (≈ footer height) to the ticket's scroll container so the last controls (EXPIRY, date picker, ADVANCED) can scroll clear of the pinned footer instead of being covered by it. 3. Consider keeping the validation error banner in normal document flow (or above the button inside the footer with the same opaque background) so it never obscures the input it refers to.

Rows
Columns