openedx / openedx/frontend-base

Replace `min-vh-100` with `dvh` to better support mobile

Open
#110 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
4
Forks
13
Avg merge
3h 21m
Merged PRs (30d)
10

Description

https://github.com/openedx/frontend-base/blob/8a42bd5001cd621faafabbed5dcd209e7cdf123e/shell/DefaultLayout.tsx#L6

uses 100vh (via min-vh-100). vh doesn't account for mobile UI elements.

I made a Paragon issue for adding min-dvh-* utility classes

Once that's discussed/lands then updating this to use the new dvh class would be awesome.

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

Start with shell/DefaultLayout.tsx at line 6 and review Paragon issue 3985, which tracks the required min-dvh-* utility classes. Once that utility is available, replace the existing min-vh-100 usage and verify that the default layout uses dynamic viewport height on mobile.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.