Skip to content

fix: mobile table overflow, branded 404, and complete Twitter card - #77

Open
TimeToBuildBob wants to merge 1 commit into
ActivityWatch:masterfrom
TimeToBuildBob:fix/mobile-overflow-404-twitter-card
Open

TimeToBuildBob wants to merge 1 commit into
ActivityWatch:masterfrom
TimeToBuildBob:fix/mobile-overflow-404-twitter-card

Conversation

@TimeToBuildBob

Copy link
Copy Markdown
Contributor

Three small fixes from a Playwright pass at 390×844 and 1280×800:

  1. Mobile overflow. Wide post tables (the blog's feature-comparison table at 590px, /contributors/ table.dataframe at 645px) made the whole page pan sideways on a 390px viewport. On phones ($on-palm), .post-content table now gets display: block; overflow-x: auto, so the table scrolls inside itself. Desktop rendering is unchanged. The Bitcoin/Ether addresses on /donate/ are one unbreakable token and were clipped; they now wrap.
  2. 404. There was no 404.html, so activitywatch.net/does-not-exist served GitHub's generic "Site not found" page with no nav. This adds a Jekyll 404.html (page layout) linking Home, Downloads, Blog, Docs and Forum. GitHub Pages still returns HTTP 404 for it.
  3. Twitter card. The homepage rendered <meta name="twitter:title" content=""> because page.title is empty there, and the default twitter:image was relative (/img/media/banners/banner-social.png), which X ignores. The title now falls back to site.title, and the image is prefixed with site.url, the same as og:image already is. Since the default image is the wide social banner, the default card is summary_large_image.

Not built locally (no Jekyll toolchain on this host); the Pages workflow builds it.

- Wide post tables (feature comparison, contributors) scroll inside
  themselves on phones instead of panning the whole page sideways.
- Crypto donation addresses wrap instead of being clipped.
- Add a Jekyll 404.html so missing pages get site nav instead of the
  generic GitHub Pages error.
- twitter:title falls back to the site title (homepage rendered it
  empty) and the default twitter:image is absolute; X ignores relative
  card images.

Co-Authored-By: Bob <bob@superuserlabs.org>
Git-Session-Id: ff82

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant