popcodeorg / popcodeorg/popcode

Page title bar overflows and has odd sizing behavior on small and/or zoomed screens

Open
#2,515 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
191
Forks
143
Avg merge
4d 11h
Merged PRs (30d)
5

Description

Describe the bug

Take a look at a classroom assignment that has a longish title, on a small or zoomed-in view. The title bar stays a small size (height: 2.4vh;), while the text gets relatively larger, overflowing the header boundaries, and overlapping page content. This is especially a problem if I am zoomed in, as I usually do when presenting code to students over Zoom, because they tend to have smaller screens (often just smartphones).

image

This acts a little differently between Chrome and Safari. On Chrome, the vh-based sizing keeps these elements small, even when the page is zoomed-in. In Safari, these elements increase in size as the page is zoomed. But, even when a non-Safari browser is used at a normal-ish size (say, 1000px wide), problems can easily arise from medium-length titles. Here’s Firefox at 1000px wide:

image

To Reproduce

Enter in a medium-long page title while using popcode in a medium-small viewport – especially while using Safari.

Expected behavior

This title bar would probably make more sense if it acted more like a "tab" in a browser UI.

  • Long titles would be truncated with ellipses (here’s how to do so with just CSS).
  • It may be easier to do this if the refresh & collapse buttons are moved before the text, but it would probably be better to rearrange the HTML structure a bit, so that the overflow can be hidden and text can truncated, without pushing these UI buttons out of view
  • Text shouldn’t overflow past the edge of the title bar, and the title bar shouldn’t cover up any content in the output web page.

Here are tabs in Chrome and Safari browsers, to illustrate what I mean:

image

Environment

  • Mac Catalina
  • Safari 13.1.1

Contributor guide

No contributing guide indexed for this repository

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

Open the linked classroom assignment and reproduce the title-bar overflow in small and zoomed viewports, especially Safari, then compare Chrome and Firefox. Inspect the title-bar markup and styles to determine how its sizing and controls behave. Done means long titles stay within the bar, controls remain visible, and the bar does not cover output content.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.