File names get truncated too aggressively on mobile version

[Fogapod]

Description

This is especially bad with nested directories. It looks like ui is trying to fit in commit message which isn't shown in mobile version, looks like a hard 15 character limit.

I don't actually know why github removed commit messages for mobile version, i dislike that change, gitea does the same now

Screenshots

Gitea Version

1.18.0+dev-5-gcc42c6488

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

Android

Browser Version

Chromium 102 based

[zeripath]

The issue appears to be:

gitea/web_src/less/_repository.less

Lines 354 to 356 in 05a74e6

	&.name {
	max-width: 150px;
	}

I'm not sure what the purpose of this 150px is...

[Gusted]

I'm not sure what the purpose of this 150px is...

#6867

🤷🏽 I've tried to change it to dynamic width, seems like the HTML/CSS specification allows td elements to stretch to it's content, so enforcing the width of the parent has no luck and I'd prefer to not make this table scrollable on the y-as. So max-width probably would need something like calc(...) or just a higher limit.

gitea does the same now

There's really no room at all on mobile to show a proper commit message with the new actual proper mobile design of the file view. It will look cramped and messy. Otherwise we end up with max two words or with more vertical space.

[zeripath]

I'm not sure what the purpose of this 150px is...

#6867

🤷🏽 I've tried to change it to dynamic width, seems like the HTML/CSS specification allows td elements to stretch to it's content, so enforcing the width of the parent has no luck and I'd prefer to not make this table scrollable on the y-as. So max-width probably would need something like calc(...) or just a higher limit.

yeah calc might work better. Maybe a max-width: 33% or something like that?

gitea does the same now

There's really no room at all on mobile to show a proper commit message with the new actual proper mobile design of the file view. It will look cramped and messy. Otherwise we end up with max two words or with more vertical space.

Perhaps it needs to be an accordion like <details>

[Gusted]

yeah calc might work better.

Yeah but it will be a nightmare solution tbh because you cannot use anything relative to the parent, because HTML/CSS specification allows td elements to stretch to it's content in theory the parent can become infinity amount of width.

Maybe a max-width: 33% or something like that?

^ So that won't work.

Perhaps it needs to be an accordion like <details>

Seems like a good idea to me.

[Fogapod]

same thing happens when file is opened even though limit seem slightly higher there