The "All Shots" and "Download" buttons are truncated on German localization

[SoftVision-CosminMuntean]

[Affected versions]:

• Nightly 64.0a1
• Screenshots 34.0.0 dev

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• The "xpinstall.signatures.required" boolean pref is set to "false".
• The "extensions.legacy.enabled" boolean pref is set tot "true".
• Have the Screenshots 34.0.0 dev version installed from here, on a new clean profile.
• Have the preferred language set to German [de-de] in "about:preferences#general".

[Steps to reproduce]:

1. Open the Firefox browser with the profile from prerequisites and navigate to any website.
2. Save a selection on the page.
3. Observe the "All Shots" and "Download" buttons.

[Expected result]:

• The buttons are entirely visible.

[Actual results]:

• The buttons are truncated.

[Notes]:

• Also, it seems that the "All Shots" and "Settings" button are too close to the edge of the page in German localization.
• Here is a screenshot of the issue:
  

[chenba]

@6a68 raised this exact concern when the new UI was proposed. @punamdahiya do you remember if there's a decision on how to handle this?

[punamdahiya]

Text style changes to ellipsis on overflow, no formal UX decision on that, including @youwenliang @johngruen for their take on it.

[clouserw]

@flodolo if we put a comment above these strings to choose the shortest words possible, does that sound like a viable strategy for this? Is the German localizer on github so we could ping them and ask?

[flodolo]

I think we should really fix the layout, not asking for shorter translations.

But yes, @koehlermichael is available on GitHub.

[johngruen]

@youwenliang's UI proposes using tooltips instead of text labels for the buttons. That would certainly save space and obviate the string length problem

[punamdahiya]

@johngruen For width > 719px we are sticking with buttons with text and needs to be fixed. Should we ask for shorter translation?

[youwenliang]

I think we should have shorter translation, at least for "All Shots".

[flodolo]

Reiterating: "ask for shorter translation" should be the last resort. A layout that can't accommodate much longer translations has issue, shorter translations would be a workaround.

[johngruen]

Agree with @flodolo, shorter translation likely means bad translation. Let's keep working on the design as is, but let's move these labels into tooltips

[punamdahiya]

@youwenliang Hiding labels leaves extra space around buttons, it will be great if we can get spec of how header (width > 719) looks without labels. Thanks!

[youwenliang]

Here's the measurement:
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Header/#artboard1

For the screenshot owner's view, we might need to change the breakpoint since currently there are seven action buttons which takes 672px (96*7). A breakpoint at 959px would be better.

[johngruen]

@punamdahiya spec looks good to me!

[punamdahiya]

Thanks @youwenliang for updated spec. @johngruen for non-owner view, are we keeping report and download button in header, my understanding these are going away.

https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Header/

[johngruen]

@punamdahiya you can ignore these buttons. they are deprecated

[punamdahiya]

#4848 should fix this issue

[johngruen]

Closed by #4848