Fix it so long strings don't cause the page to get wider on mobile

Offen Anfängerfreundlich
#13,683 3 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
65/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
css
Bereich
frontend

Rechercherichtung

Öffne https://openlibrary.org/help/faq/editing in einem Viewport in mobiler Größe und reproduziere die im Screenshot beschriebene horizontale Verbreiterung. Untersuche das CSS der Seite, um die Regel zu finden, die das Umbrechen oder Überlaufen langer Zeichenketten steuert. Erledigt ist die Aufgabe, wenn lange Zeichenketten die Seite auf mobilen Geräten nicht mehr verbreitern und das FAQ-Layout weiterhin nutzbar bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Affects: Mobile/Responsive Affects: UI Good First Issue Lead: @lokesh Module: CSS Priority: 3 Type: Bug
Problem

https://openlibrary.org/help/faq/editing

Probably one line of CSS we need to update.

Image
Reproducing the bug
  1. Open https://openlibrary.org/help/faq/editing on a phone, or at a 375px-wide viewport in devtools
  2. Scroll down to the list of example work URLs
  • Expected behavior: long strings wrap inside the content column, and the page doesn't scroll sideways.
  • Actual behavior: Moon_is_Down_Of_Mice_and_Men_Pearl_Red_Pony_Tortilla… runs off the edge, which makes the whole page (header included) wider than the viewport.
Context
  • Browser (Chrome, Safari, Firefox, etc): any (mobile)
  • OS (Windows, Mac, etc):
  • Logged in (Y/N):
  • Environment (prod, dev, local): prod
Breakdown
Implementation Details (for maintainers)

Cause. Two things combine:

  1. The only wrap rule for wiki pages is div#contentBody p a { word-wrap: break-word; }, so it only covers links inside paragraphs. Plain text, list items, headings, etc. don't wrap.
  2. On this page, the URL https://openlibrary.org/works/OL23185W/The_Short_Novels_of_John_Steinbeck_(Cannery_Row_… contains parentheses, which break the markdown link. The link ends partway through, and the rest renders as unlinked plain text. Rule 1 doesn't cover plain text, so it overflows.

Fix. Make wrapping apply to the whole content container instead of just p a:

div.contentBody,
div#contentBody {
  overflow-wrap: break-word;
}

Then remove the now-redundant p a rule. break-word only breaks a string that can't fit on its own line, so normal text on other pages is unaffected.

Requirements Checklist
  • Replace the div#contentBody p a / div.contentBody p a rule in static/css/layout/index.css with overflow-wrap: break-word on div#contentBody, div.contentBody
  • Verify at a 375px viewport that /help/faq/editing no longer scrolls horizontally (include before/after screenshots in the PR)
  • Spot-check a few other pages that use the same template (/about, /help, another /help/faq/* page) for regressions
  • (Maintainer, separate from the PR) Fix the malformed links on /help/faq/editing itself (the OL23185W and OL17592217W examples) by editing the page source via ?m=edit
Related files
  • static/css/layout/index.css (the #contentBody rules, ~L55-66)
  • openlibrary/templates/type/page/view.html (wraps wiki page bodies in #contentBody)
Stakeholders
  • @lokesh
Instructions for Contributors
  • Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.
Vorherrschende Sprache
Python
Sterne
6.7k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
121

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus internetarchive/openlibrary

Alle Issues in internetarchive/openlibrary

Ähnliche Issues

Weitere Issues zu Python

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.