Page MenuHomePhabricator

Long filenames break save dialog layout
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Enter the save dialog for a suggestion with a long filename

What happens?:

image.png (388×882 px, 132 KB)

The image icon goes above the file name, and the "check" or "reject" icon is out of the viewport entirely

What should have happened instead?:

The image icon should stay left aligned, and the filename should wrap, allowing the check/reject icon to be visible.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:

Event Timeline

kostajh added a subscriber: RHo.

@RHo could you check my "what should have happened" description to make sure that I've got that right, please?

@RHo could you check my "what should have happened" description to make sure that I've got that right, please?

Hi @kostajh - thanks for noticing this. I've updated the figma spec to show an example of what should happen with the name is long and needs to wrap. I think it is basically what you've written:

image.png (890×1 px, 331 KB)

kostajh triaged this task as High priority.Nov 11 2021, 2:09 PM

Change 738955 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Avoid long filenames break save dialog layout

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

Change 738955 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Avoid long filenames break save dialog layout

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

Etonkovidova added a subscriber: Etonkovidova.

Checked in betalabs - works as expected.

@RHo could you check my "what should have happened" description to make sure that I've got that right, please?

Hi @kostajh - thanks for noticing this. I've updated the figma spec to show an example of what should happen with the name is long and needs to wrap. I think it is basically what you've written:

image.png (890×1 px, 331 KB)

@RHo The file name in your mockup is displayed as it would be on a File page on commons. Probably it'd make sense to change the file name display to a commons File page title (I mentioned it already in one of my comments)?

image.png (388×882 px, 132 KB)
Screen Shot 2021-11-15 at 5.32.36 PM.png (329×909 px, 46 KB)

Checked in betalabs - works as expected.

@RHo could you check my "what should have happened" description to make sure that I've got that right, please?

Hi @kostajh - thanks for noticing this. I've updated the figma spec to show an example of what should happen with the name is long and needs to wrap. I think it is basically what you've written:

image.png (890×1 px, 331 KB)

@RHo The file name in your mockup is displayed as it would be on a File page on commons. Probably it'd make sense to change the file name display to a commons File page title (I mentioned it already in one of my comments)?

image.png (388×882 px, 132 KB)
Screen Shot 2021-11-15 at 5.32.36 PM.png (329×909 px, 46 KB)

Ah yes I agree. Filed as T295886 - thanks for the prompt!

Checked on testwiki wmf.9 - looks as expected:

Screenshot_20211117-104431_Samsung Internet.jpg (2×1 px, 245 KB)