Some text in the wiki overlay overlaps

[mouzedrift]

Describe the bug:
some text in the wiki pages overlaps

Screenshots or videos showing encountered issue:
visual settings page:

multi page:

osu!lazer version:
2021.602.0

[frenzibyte]

For reference, this is how they look in osu!web:

Visual settings page:

Multi page:

[gagahpangeran]

After initial investigation the text flow TotalTextWidth and the table cell ContentWidth is right. There may be something wrong when calculating the grid cell dimension in framework side.

https://github.com/ppy/osu-framework/blob/5835bb8310fb4e0348d5abef752f6d477356998a/osu.Framework/Graphics/Containers/Markdown/MarkdownTable.cs#L91

[smoogipoo]

Quite likely. If you're able to test with a local framework, try applying the following change:

diff --git a/osu.Framework/Graphics/Containers/Markdown/MarkdownTable.cs b/osu.Framework/Graphics/Containers/Markdown/MarkdownTable.cs
index 3bc86b2239..7299fa580b 100644
--- a/osu.Framework/Graphics/Containers/Markdown/MarkdownTable.cs
+++ b/osu.Framework/Graphics/Containers/Markdown/MarkdownTable.cs
@@ -24,8 +24,8 @@ public class MarkdownTable : CompositeDrawable
 
         private readonly Table table;
 
-        private readonly LayoutValue columnDefinitionCache = new LayoutValue(Invalidation.DrawSize, conditions: (s, _) => s.Parent != null);
-        private readonly LayoutValue rowDefinitionCache = new LayoutValue(Invalidation.DrawSize, conditions: (s, _) => s.Parent != null);
+        private readonly LayoutValue columnDefinitionCache = new LayoutValue(Invalidation.DrawSize, InvalidationSource.Default | InvalidationSource.Child, conditions: (s, _) => s.Parent != null);
+        private readonly LayoutValue rowDefinitionCache = new LayoutValue(Invalidation.DrawSize, InvalidationSource.Default | InvalidationSource.Child, conditions: (s, _) => s.Parent != null);
 
         public MarkdownTable(Table table)
         {

[gagahpangeran]

Still happen.

[gagahpangeran]

Update for this.

This happen because totalWidth of the table is more than its DrawWidth, so the column dimension change from absolute to relative in this code.

https://github.com/ppy/osu-framework/blob/bf3b398128562782bd822a1d47fd468eb323d683/osu.Framework/Graphics/Containers/Markdown/MarkdownTable.cs#L117-L122

Now, because the column width is changed to relative, each column width is columnWidths[i] / totalWidth. This can make the width of the column is less than the width of its content.

It's not a problem if the content is plain text flow because it can wrap. But it's a problem with inline code and emphasis text, like in OP, because they can't wrap, so the content is overflow.

I'm not sure how to approach this issue.

[smoogipoo]

I think the fix is making the framework support wrapping in nested TFCs.

The bigger question I have is how that's going to support backgrounds, because for example web displays the corner radius as:

 /--------|
| line 1  |
 \--------|
|--------\
| line 2  |
|--------/

Not sure on the solution yet, but I suspect adding support for nested TFCs is not enough by itself.