[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.

Assessment

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

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.

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
Dominant language
Liquid
Stars
3.1k
Forks
4.5k
No merged PRs in 30d

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.

More from Shopify/dawn

All issues in Shopify/dawn

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.