Page MenuHomePhabricator

Make cards fixed width
Closed, ResolvedPublic

Description

We currently render the card within the dialog, whose width depends on the user's viewport.
This would result in cards of different dimensions (and corresponding differences in how the data is presented: image size, text size, ...) depending on the device that ended up sharing them.

The card should always be rendered the exact same, regardless of the device.

Acceptance criteria

  • downloaded/shared cards are 288px wide (and 512/288px high depending on whether they have an image or not, respectively)
  • cards are displayed exactly the same as they are downloaded/shared

Event Timeline

Change #1284723 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Fixed card width

https://gerrit.wikimedia.org/r/1284723

Change #1286326 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Adjust image size to match fixed width

https://gerrit.wikimedia.org/r/1286326

Change #1284723 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Fixed card width

https://gerrit.wikimedia.org/r/1284723

Change #1286326 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Adjust image size to match fixed width

https://gerrit.wikimedia.org/r/1286326

Change #1286839 had a related patch set uploaded (by Marco Fossati; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@wmf/1.47.0-wmf.2] Fixed card width

https://gerrit.wikimedia.org/r/1286839

Change #1286844 had a related patch set uploaded (by Marco Fossati; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@wmf/1.47.0-wmf.2] Adjust image size to match fixed width

https://gerrit.wikimedia.org/r/1286844

Change #1286844 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@wmf/1.47.0-wmf.2] Adjust image size to match fixed width

https://gerrit.wikimedia.org/r/1286844

Change #1286839 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@wmf/1.47.0-wmf.2] Fixed card width

https://gerrit.wikimedia.org/r/1286839

Mentioned in SAL (#wikimedia-operations) [2026-05-13T13:27:13Z] <mfossati@deploy1003> Started scap sync-world: Backport for [[gerrit:1286518|[Share Highlight] Exclude section edit links, footnotes from selection (T423658)]], [[gerrit:rEWBA128683823dcc|Add robust color fallbacks for QuoteCard average-color styling (T425358)]], [[gerrit:1286839|Fixed card width (T425710)]], [[gerrit:1286844|Adjust image size to match fixed width (T425710)]], [[gerrit:1286846|ShareHighlight: exclude browsers th

Mentioned in SAL (#wikimedia-operations) [2026-05-13T13:29:09Z] <mfossati@deploy1003> jdlrobson, mfossati: Backport for [[gerrit:1286518|[Share Highlight] Exclude section edit links, footnotes from selection (T423658)]], [[gerrit:rEWBA128683823dcc|Add robust color fallbacks for QuoteCard average-color styling (T425358)]], [[gerrit:1286839|Fixed card width (T425710)]], [[gerrit:1286844|Adjust image size to match fixed width (T425710)]], [[gerrit:1286846|ShareHighlight: exclude browsers that d

Mentioned in SAL (#wikimedia-operations) [2026-05-13T13:40:29Z] <mfossati@deploy1003> Finished scap sync-world: Backport for [[gerrit:1286518|[Share Highlight] Exclude section edit links, footnotes from selection (T423658)]], [[gerrit:rEWBA128683823dcc|Add robust color fallbacks for QuoteCard average-color styling (T425358)]], [[gerrit:1286839|Fixed card width (T425710)]], [[gerrit:1286844|Adjust image size to match fixed width (T425710)]], [[gerrit:1286846|ShareHighlight: exclude browsers t

lwatson set the point value for this task to 1.May 13 2026, 4:04 PM
lwatson removed the point value 1 for this task.

Checked on itwiki wmf.2
https://it.wikipedia.org/wiki/Fascia_principale?shareHighlight=1

(1) The size of a share card is the same on different screen widths

Screenshot 2026-05-13 at 5.10.33 PM.png (736×1,556 px, 473 KB)
Screenshot 2026-05-13 at 5.12.24 PM.png (870×1,732 px, 511 KB)
Screenshot 2026-05-13 at 5.14.42 PM.png (1,438×1,804 px, 826 KB)

(2) ext-readerExperiments-quoteCard has width=288, but the height seems to be bigger than 512 px

Screenshot 2026-05-13 at 5.28.52 PM.png (370×773 px, 140 KB)

We're hoping that T426247: Share Highlight: Ensure dialog header is visible on small devices resolves the height issue (the height appears to be larger than 512 px). We can test on beta today and/or production tomorrow after it's backported.

Resolved - since this task is scoped to the card's width. The height issue is expected to be addressed in T426247