User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.61

Steps to reproduce:

Thunderbird Beta 4

Location = New contact dialog in address book.
chrome://messenger/content/addressbook/abNewCardDialog.xhtml

Actual results:

input field is above another input field,
Very difficult to use.
The layout is terrible

Expected results:

Please correct it as soon as possible.

(In reply to r1a_w5lz from comment #0)

r1a_w5lz, thank you for this bug report.

Actual results:
input field is above another input field,

In the upper right corner of the dialog, right?
What surprises me is that you seem to have two more fields than en-US.

It seems that the fields for Wor(k) and Ho(m)e overlay two other fields which are not even present with en-US.
Could you give us the translated captions of the other two?
Could you provide a comparative screenshot of another TB version where the layout is still correct?

(In reply to Thomas D. from comment #1)

For comparison, here's the same dialog in en-US. The reported localized version preserves the en-US access keys so we can derive some of the field names from there.

I cannot reproduce on 78.0b4 windows10.

Build ID: 20200629202523
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Thunderbird/78.0

Hello.

Is it a problem with the display I'm using?
It remains broken even if the resolution is changed.
It remains broken even if scaling is turned off.
I confirmed it on two displays, but it collapses.

EIZO FlexScan S2243W-HXGY
EIZO FlexScan S2433W-HXBK

Will collapse in Thunderbird 78.0b4 64bit
Displayed correctly in Thunderbird 68.10.0 64bit

OS＝Windows 10 64bit 19041.388

Additional description.

I also tried a new profile, but the defects in the layout remain the same.
The OS font was also set to the default, but the layout problem was not fixed.
I don't use add-ons or CSS.
The same problem occurs on the PC used by my family.
The OS used by the family is Windows 10 64bit 1909.
What they have in common is that they use the EIZO display.
However, the screen size, model number, resolution, etc. are different.
I tried several kinds of display drivers, but the problem was not fixed.
More than this, I'm having trouble thinking about the cause of the layout collapse.

One more. Excuse me.
I have another computer for my family.
I checked with the computer.
The result is again a broken layout.
The OS of this PC is Windows 10 64 bit 1909.
The display is an EIZO FlexScan S 1921.
The layout of all the computers I have reported so far is still broken.
It will be long, but I will write the configuration of the PC whose layout is broken.

1.OS＝Windows 10 64bit 2004
2.GPU＝MSI・GTX1070 Ti GAMING 8G
4 CPU＝intel・Core i7-8700K BOX LGA1151
5.motherboard＝ASUS・ROG MAXIMUS X HERO (WI-FI AC) LGA1151
6.Memory＝CORSAIR・CMK16GX4M2B3000C15 DDR4-3000 8GB×2
7 SSD＝Western Digital・BLACK SN750 WDS250G3X0C M.2 250GB
8.display＝EIZO・FlexScan S2243W-HXGY 22 Wide

1.OS＝Windows 10 64bit 1909
2.GPU＝MSI・GTX1070 GAMING 8G
4 CPU＝intel・Core i7-7700K Box 1151
5.motherboard＝ASUS・ROG MAXIMUS IX HERO Z270 LGA1151
6.Memory＝CORSAIR・CMK16GX4M2A2666C16R DDR4-2666 8GB×2
7 SSD＝Intel・760p SSDPEKKW256G8XT M.2 PCIEx4 256GB
8.display＝EIZO・FlexScan S2433W-HXBK 24.1 Wide

1.OS＝Windows 10 64bit 1909
2.GPU＝MSI・GTX1070 Ti GAMING 8G
4 CPU＝intel・Core i5-6600K BOX ソケット1151
5.motherboard＝ASUS・ROG MAXIMUS IX HERO Z270 LGA1151
6.Memory＝CORSAIR・CMK8GX4M2A2666C16 DDR4-2666 4GB×2
7 SSD＝SANDISK・SDSSDXPS-240G-J25
8.display＝EIZO・FlexScan S1921 square

All Attached image abNewCardDialog.jpg — Same as Details
I can't find a solution at all.
If it just doesn't work, can't I change it using userchrome.css?
If you can do that, please tell me how to write the code.
I installed a new OS, but the problem was not resolved.

I'm exhausted to check. sorry.

I am running Japanese locale Windows 10 pro 64 bit version.
Both 78b4 and 79b01 did not have the problem mentioned here.
(78b4 immediately asked me to reboot to update and I got 79b01. So I am showing the screen of 79b01.)

I am using DELL display with 3840 x 2160 resolution.
But I have set the default character size set to 200 % in the display setting that is invoked in the context menu (right click) on window desktop. [My display's physical size is relatively small and thus I need to enlarge the character to read it comfortably.]

(In reply to ISHIKAWA, Chiaki from comment #7)

Created attachment 9164222 [details]
79b01 image.

I am running Japanese locale Windows 10 pro 64 bit version.
Both 78b4 and 79b01 did not have the problem mentioned here.
(78b4 immediately asked me to reboot to update and I got 79b01. So I am showing the screen of 79b01.)

I am using DELL display with 3840 x 2160 resolution.
But I have set the default character size set to 200 % in the display setting that is invoked in the context menu (right click) on window desktop. [My display's physical size is relatively small and thus I need to enlarge the character to read it comfortably.]

I am using NVIDIA GeForce GT1030 card. Have you updated the driver for the graphics card?
I noticed that you used GTX 1070 Gaming 8G on all the PCs where layout is broken. I get suspicious about it.

I am running GeForceGT 1030 at 3840 x 2160 True Color (32-bit) x 60 Hz. And the driver was dated Oct 2019, reasonably new.
YMMV.

I noticed that the original poster tried several drivers. Hm...

I tried a lot, but I have no idea what it is. I tried the 78.0 release version, but it didn't fix.

Previously I reported a layout corruption in Bug 1650342 that seems to be related to this issue.

Account settings
There is a problem with the position of the work box and home item box in the Edit vCard dialog.

I can't find any solution to the layout bug. What is affecting it?

Could you try an English version?

Thank you very much.
There was no problem with the English version.
However, I am worried because I want to use the Japanese version.

I'm sorry.
In English and Japanese versions
The default layout was different.

I tried the Japanese version and it looked good.

Maybe you could try this:
Close TB. Make a backup of your profile. Then look for the xulstore folder in that profile and delete it. Now start TB again and check the window.
Deleting xulstore resets all customisation like window position/size and customized buttons. So you need to set it again when using this profile.

Thank you very much for contacting me.
I deleted xulstore folder and tried it.
The buttons, etc. have been reset, but the Address Book dialog remains the same as I have already reported. The layout remained broken.
As I wrote before, I also tried all the new profiles. But nothing was fixed.
The layout is broken on all three PCs that I and my family use.
There may be some parts of the PC used in the family that are not compatible with Thunderbird.
There was no problem in ver.60 and ver.68, but the layout suddenly collapsed in ver.78.
Those who are using ver.78 in Japan said that there is no problem with the layout.
Only me and my family seem to have problems.
I did everything I could check.
Is there no choice but to give up?

@repoter,
Could you please attach the results of about:support here?
(ヘルプ > トラブルシューティング情報 > テキストをクリップボードにコピー)

And can you use mozregression to find out when it broke?
(https://mozilla.github.io/mozregression/)

And can you download old ja build(thunderbird-xxxxa1.ja.win64.zip) from https://archive.mozilla.org/pub/thunderbird/nightly/.
You can download each build using bisection method between from 2019/05/2019-05-22-09-26-00-comm-central-l10n to 2020/07/2020-07-11-00-19-11-comm-central-l10n to find out when it broke?

Paste the troubleshooting information.

Tried with the old version.
Up to 70.0b4 has a normal layout.
The layout has been broken since 71.0b1.

The size of the part where the layout is broken.

78.0.1-candidates/build2/win64/ja/
In this version, the layout collapse is worse.
The entry field on the right side is cut off.

Even with the 78.0.1 release version, the layout is very bad.
I tried everything I could, but I can't fix this problem.
Why is this problem common to all 3 PCs used by my family?
What is the difference that the layout does not collapse in other people's Japanese version?
Is there a compatible fix that won't break the layout in all environments?

Ping, do you see this by any chance?

(In reply to Magnus Melin [:mkmelin] from comment #23)

Ping, do you see this by any chance?

I can reproduce it on Linux. By removing the width on .CardEditWidth, the overlapping problem is fixed. But inputs are clipped by the window on the right hand side.

.CardEditWidth {
  /* width: 42ch; */
}

Without any CSS change, and with en-US locale, inputs are still clipped. I think the root cause is the dialog window width is not adapted to the content width. But I don't know how it happened.

Thanks, please take this bug an see if you can find a fix.

Two parts of the problem:

1. I don't know how to explain it, but min-width: 0 seems a common way to prevent elements taking too much space in flex/grid layout
2. On the right column, the hbox wrapper of input seems unnecessary

BTW, I can only reproduce this issue on Ubuntu 20.04, not on Fedora.

Here's a screenshot with the phonetic fields visible, and the fixed version.

Hi, your patch doesn't seem to fix the problem. Please see the attached image, it's the same as what I mentioned in comment #25. Inputs in the right column are clipped.

(In reply to Alessandro Castellani (:aleca) from comment #28)

Comment on attachment 9165876 [details] [diff] [review]
1652256.patch

Review of attachment 9165876 [details] [diff] [review]:

Thanks for trying to fix this, but unfortunately this is not correct.
The min-width is a CSS workaround that shouldn't be applied in this
situation, and removing the input-container HBOX element breaks the flex
layout consistency applied to this structure.

Seems to me the hbox.input-container is only needed in the left column, because there can be more than one input in a row. The left column is structurally different from the right column, I don't think consistency matters here. Or at least the .input-container is not needed in the right column.

Do you mind taking another look at my patch? Does it break something? I have Ubuntu installed on a machine, and installed Ubuntu in Gnome Box on another machine yesteray. Both can reproduce this issue.

Here's a screenshot of how it looks with your patch.

Without the input-container on the right side, we let the input grow based on a pre defined number of characters instead of letting it grow with its flex attribute.
I guess it's not a big deal, but we might stumble upon UI issues with l10n.

The other issue, which is the primary one IMHO, is that with the phonetic fields visible and the min-width: 0, we let the field shrink instead of the dialog grow to accommodate the fields.
This can cause issues with l10n as well, since the width of the label will determine how big those fields will be.

It's very strange that your dialog is cut in Ubuntu, even without the phonetic fields visible. I can't reproduce that issue.

Richard or Magnus, any luck in reproducing this error?

Setting mail.addr_book.show_phonetic_fields to (string) "true" makes the issue show on en-US builds as well.

The short fields may not be too much of an issue, since this is only used by japanese, chinese and kazakh. I think typically the strings are short?

https://dxr.mozilla.org/l10n-central/search?q=mail.addr_book.show_phonetic_fields&redirect=false (a few locales incorrectly localized the value, dunno what they will get)

This fixes it for me. I changed from box model to grids. To not expand the dialog with phonetic fields enabled too much, I added a max-width of 18ch to them.

Alessandro, Magnus, I added both for r? and the first wins.

Pushed by mkmelin@iki.fi:
https://hg.mozilla.org/comm-central/rev/fd7f7c68f598
Fix Address Book layout issue when displaying phonetic names. r=mkmelin

One more confirmation.
Is this glitch that you reported in comment 10 a separate issue?

Account Setting
There is a problem with the position of the work and home boxes in the Edit vCard dialog.

I confirmed the nightly version.
The left item column is abnormally long.
Still in the middle of a fix?

File thunderbird-80.0a1.ja.win64.zip 77M 27-Jul-2020 13:18

The topic for reporting to Bug 1652256 was closed.
However, it is not yet fully resolved.
We will continue to report this as a related issue.
Voir le Comment 44.

Windows10 64bit 19041.388 Japanese.

Richard, are you able to tackle what's reported on comment 42?
It's probably the same issue.

(In reply to r1a_w5lz from comment #45)

The topic for reporting to Bug 1652256 was closed.
However, it is not yet fully resolved.

r1a_w5lz, per your own screenshot of comment 44, the main problem of this bug has been fixed, hence "Resolved FIXED" is correct.
Thank you very much for reporting this bug and following through until we were able to reproduce and fix it, and thanks to everyone involved with getting this fixed, esp. Richard for the final patch!

Voir le Comment 44.

I have filed the remaining minor layout issue of comment 44 as bug 1655816, so that we can have a clean start there.
(In reply to Alessandro Castellani (:aleca) from comment #46)

Richard, are you able to tackle what's reported on comment 42?
It's probably the same issue.

Maybe, or maybe not. The vCard dialog has the styling of account manager, and cannot be moved around with mouse, so perhaps it's a different animal. Anyway, if you don't mind, I think we should also try that in a new bug...
EDIT: comment 42 is wfm per my comment 48 (see screenshot of attachment 9166650 [details]).

Comment 42 looks wfm on Win10/81.0a1 (2020-07-28) (64-bit).
Probably fixed by this bug.

(In reply to Alessandro Castellani (:aleca) from comment #46)

Richard, are you able to tackle what's reported on comment 42?

(In reply to r1a_w5lz from comment #42)

Created attachment 9166130 [details]
Account Settings
There is a problem with the position of the work and home boxes in the Edit vCard dialog.

FTR, a screenshot of this bug in en-US as seen on release (hence approval-comm-esr78? request in comment 40). As the problem is seen in English and Japanese, it probably affects all locales when the phonetic pref is true (which can be used by any enterprise with international address book where they want phonetic transcription of foreign names).

(In reply to Richard Marti (:Paenglab) from comment #40)

Comment on attachment 9166067 [details] [diff] [review] ⧉[details] [diff] [review]
1652256-ab-layout.patch

[Approval Request Comment]
User impact if declined: some textfields cover other textfields on some
locales
Testing completed (on c-c, etc.): soon on c-c
Risk to taking this patch (and alternatives if risky): should be low

Yes, this landed on the latest 79 beta, and it will land in 78.1.1
Here's the latest 79 build if you want to test it: https://www.thunderbird.net/en-US/thunderbird/beta/all/

With the benefit of hindsight, let's rectify and complete the summary.
Japanese just exposes this by default, but any locale will be affected if the phonetic pref is set to true.

Fwiw, for longer phonetic transcriptions, this shows the visual overlap distortion of this bug. Good to see this fixed!
(No, I don't know Japanese - taken from https://de.wikipedia.org/wiki/Japanischer_Name)

Looks like it's closed.
I'm reporting the same symptoms as r1a_w5lz.
I posted the details at Bug 1655816.
I'll post an image.
As for the vCard dialog.
I'd like to start a new thread.

(In reply to Richard Marti (:Paenglab) from comment #32)

Comment on attachment 9165980 [details] [diff] [review]
1652256-ab-layout.diff

Looks reasonable. Unfortunately I don't see the issue to check that the
patch works.

The question is, why isn't it visible for all with a similar system (Windows
10)?

I wonder if someone can enlighten me why I did not see the problem under Windows10 while the original reporter did.
Also, if I am not mistaken, some linux systems showed the symptom while other didn't.
(Is there some uninitialized memory value involved?)

Inquiring mind wants to know.

Oh, this has been closed. Maybe I should ask this again in the new bug.

I apologizes
The machine translation is wrong and I will repost it.

I have the same abNewCardDialog bug as r1a_w5lz.
I also have a bug in the vCard dialog.
That's why I've been watching the thread for a long time.
But that bug is still going on. It has not been resolved.
It seems to be closed, but I'll post a picture anyway.
I posted the details at Bug 1655816.

As for the problem with the vCard dialog.
start a new thread. Bug 1655907.

(In reply to ISHIKAWA, Chiaki from comment #54)

Oh, this has been closed. Maybe I should ask this again in the new bug.

Should this be reopened?

Can bug reporter confirm whether or not this has been "fixed"?

(In reply to Worcester12345 from comment #56)

Should this be reopened?

No

To Worcester12345.
I am the bug reporter.

"Can bug reporter confirm whether or not this has been "fixed"?"
I will answer the question.

The bug that the item on the left is long has not been fixed.

thunderbird-81.0a1.ja.win64.zip 77M 29-Jul-2020 13:04 nightly

Sorry for the late report.

(In reply to r1a_w5lz from comment #59)

The bug that the item on the left is long has not been fixed.

thunderbird-81.0a1.ja.win64.zip 77M 29-Jul-2020 13:04 nightly

Sorry for the late report.

The nightly yesterday didn't include the patch in bug 1655816, please try again with today's nightly later, thanks.

It may not be in the same situation as r1a_w5lz, but I found a step that could be a hint.

1. Opens a new contact dialog for Thunderbird.
2. Change the display scale to 175% in Windows display settings.
3. Return the display scale to 100%.
4. The size of the dialog grows and the input fields grow.

I've attached a screenshot of the result of doing the above steps for Nightly (2020-07-29) and (2020-07-30).

I am the bug reporter.
We have confirmed that the bug has been fixed in this version.
thank you for helping me.
Thank you very much.

thunderbird-81.0a1.ja.win64.zip 77M 30-Jul-2020 13:13

(In reply to ISHIKAWA, Chiaki from comment #54)

(Is there some uninitialized memory value involved?)

Inquiring mind wants to know.

Oh, this has been closed. Maybe I should ask this again in the new bug.

Do my Comment 61 give you a hint?

(In reply to EarlgreyTea from comment #63)

(In reply to ISHIKAWA, Chiaki from comment #54)

(Is there some uninitialized memory value involved?)

Inquiring mind wants to know.

Oh, this has been closed. Maybe I should ask this again in the new bug.

Do my Comment 61 give you a hint?

This (comment 61) is an interesting example "under Windows 10". I have reported my "correct" screen dump.

HOWEVER I am very puzzled that there are different LINUX installations where symptoms differ. That bothers me a lot.
I wonder WHAT are the causes of the difference? (Default Font setting, especially size as in by comment 61)
But I suspect many use linux distribution without much tweaking. If so, what are the causes of layout changes seeming randomly under linux even.: comment 25, comment 30, comment 37, etc.

IMHO, an application ought to be self-contained as far as the default layout is concerned. I mean the default layout of an application should not change much under different linux distrubition or windows.
(I have a feeling that there may be an uninitialized variable used during the processing, but who knows...)

It is r1a_w5lz.
Thank you for fixing the page on the contact tab of the dialog.

Excuse me, please let me ask only one question.

Are the changes to the layout of the other tab pages in 81.0a1 a specification?

I am sorry to ask you a question after closing.
Thank you in advance.

They are for unifying the appearance.

Thank you very much.

(In reply to blue1620 from comment #62)

...
I am the bug reporter.
We have confirmed that the bug has been fixed in this version.
thank you for helping me.
Thank you very much.

thunderbird-81.0a1.ja.win64.zip 77M 30-Jul-2020 13:13

Thank you for updating the bug report. v.fixed

Thunderbird 78.1.1:
https://hg.mozilla.org/releases/comm-esr78/rev/47f9cf8c8a86

Comment on attachment 9166067 [details] [diff] [review]
1652256-ab-layout.patch

Wayne, can you please remove the approval-comm-beta flag here. This was never uplifted to any beta and is confusing the queries.

I can't even do small fixes like this myself any more since someone removed my rights to change the flags (NI mkmelin for the latter).

Comment on attachment 9166067 [details] [diff] [review]
1652256-ab-layout.patch

Thanks for pointing out the errant flag.

Per my email, since you're not involved in release management anymore you're not in the drivers group -> not no rights to change these flags.