[2.20, German] Statistics: True Retention overflows screen

[david-allison]

German locale, 2.20alpha3, statistics page, last table (true retention):

It fits more or less, but you can move it a bit wishing to the left or right. And the title text "Fehlversuche" and "Erfolgsquote" go beyond their column (while the first colomn has even free space):

Originally posted by @sommerluk in #17366 (comment)

[Aditya13s]

I am working on it.

[david-allison]

@Aditya13s how do you plan to tackle this?

---

This needs to be done ASAP, so there's a chance it'll conflict if it takes too long

[Aditya13s]

@Aditya13s how do you plan to tackle this?

I’m thinking of decreasing the width percentage of the first column.

[Aditya13s]

colgroup col:first-child { width: 30% }
colgroup col:nth-child(2) { width: 20%; }

These lines make the page look like this. Is this good?

[sommerluk]

At least for German, that's great. Thank you!

(I've noticed that this is also an upstream issue (in Anki Desktop), thous it is more difficult to trigger there because you can freely resize the window, and most sizes work well.)

[BrayanDSO]

Reducing the width isn't a universal fix. A user that has the font size increased for accessibility and a smaller device can see the overflow in any language.

I believe that this also applies to AnkiMobile (if the app font should scale with the system's font, if it doesn't, it is an even bigger problem). Anki desktop doesn't scale with Windows font size, so the problem doesn't exist there because of another one.

Anyway, upstream issue, although we are affected.

[mikehardy]

The page does have fonts go up when you change system font size, and everything goes up when you change display size (both in accessibility) -> I checked

And both blow up the page completely because it's not responsively designed fundamentally - it needs more work than just constraining a table

I do not consider this a 2.20 blocker and move to ignore it for now.

[Aditya13s]

I think that making the table horizontally scrollable could solve the issue.

[brishtibheja]

I have faced text overflow issues for other parts of the screen (even with popular languages like JP).

An example:

---

The TR table for German will probably look better after ankitects/anki#3640.