Alt text is too wide

[Christopher-Hayes]

Description

Alt text on desktop screens is really wide, it's not good for readability.

Screenshots

Proposed Solution

If we match the max-width of Mastodon posts (600px), we get:

For longer alt text (like the 2nd screenshot), we could clamp it at 3 lines:

Code from proposed solution

Parent div:

max-width: 600px;
border-radius: 12px; /* full rounded doesn't look good on multiple lines */

Alt text p:

[line-clamp-3] {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Related Issues

Alt text should be wrapped #2509

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

[Christopher-Hayes]

Unrelated - While I'd prefer to invite discussion and get sign-off from a maintainer before starting a PR, I did try the "Solve in Codeflow" button above. However, the setup script failed with:

│ ✔ Types generated in .nuxt
│ > @elk-zone/[email protected] prepare-translation-status /home/elk-zone/elk
│ > tsx scripts/prepare-translation-status.ts
│ TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/elk-zone/elk/scripts/prepare-translation-status.ts
...
│ Node.js 18.20.3
│  ELIFECYCLE  Command failed with exit code 1.
│ Process exited with code: 1
└─ Failed in 17.6s at /home/elk-zone/elk
 ELIFECYCLE  Command failed with exit code 1

[mojoaxel]

A similar problem exists on mobile. If the alt text is too long it gets cut off with an ellipsis. I think alt-texts should auto wrap like proposed here.