Shopify / Shopify/dawn

[Bug]: Mobile Cart Drawer - Checkout button hidden / drawer unscrollable on mobile 360px - Dawn 15.0.0

Open Beginner friendly
#3,969 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Liquid
Stars
3.1k
Forks
4.5k
PR merge metrics
No merged PRs in 30d

Description

Describe the current behavior

On mobile viewport 360x800, after adding product to cart, the cart drawer opens. Subtotal is visible but the Checkout button is hidden below the fold and the drawer cannot be scrolled.

cart-drawer has overflow: hidden / max-height issue, so user cannot reach checkout.

Reproduced on:

Describe the expected behavior

Cart drawer should be scrollable on mobile and Checkout button must always be reachable. Should use overflow-y: auto with proper max-height: 100dvh.

Version information
  • Dawn Version: 15.0.0
  • Chrome Version: 126.0.6478.122 Mobile
  • Android Version: 13
  • Viewport: 360x800
Possible solution

Change .cart-drawer container to:

.cart-drawer__inner { overflow-y: auto; max-height: 100dvh; }

[FINAL_x5f_ACCEPTED_x5f_Shopify_x5f_Cart_x5f_Drawer_x5f_Bug (1).pdf](https://github.com/user-attachments/files/31523790/FINAL_x5f_ACCEPTED_x5f_Shopify_x5f_Cart_x5f_Drawer_x5f_Bug.1.pdf)

https://github.com/user-attachments/assets/25956f4f-98a7-41c5-807c-ccea9659c20a

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the cart drawer at 360x800 on the linked Dawn demo, then inspect the cart-drawer and .cart-drawer__inner styles. Verify the drawer can scroll and the Checkout button remains reachable after applying the proposed overflow and viewport-height behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.