File names get truncated too aggressively on mobile version #9087

Closed
opened 2025-11-02 08:28:56 -06:00 by GiteaMirror · 5 comments
Owner

Originally created by @Fogapod on GitHub (Jun 19, 2022).

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

Screenshot_20220619-162836_Brave

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

Originally created by @Fogapod on GitHub (Jun 19, 2022). ### 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 ![Screenshot_20220619-162836_Brave](https://user-images.githubusercontent.com/22667809/174483500-38251f2f-801c-442e-a58a-60b92127b2b6.png) ### 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
GiteaMirror added the topic/uitype/bug labels 2025-11-02 08:28:56 -06:00
Author
Owner

@zeripath commented on GitHub (Jun 19, 2022):

The issue appears to be:

05a74e6e22/web_src/less/_repository.less (L354-L356)

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

@zeripath commented on GitHub (Jun 19, 2022): The issue appears to be: https://github.com/go-gitea/gitea/blob/05a74e6e22984d31c61f38b1174882cf19b1f81c/web_src/less/_repository.less#L354-L356 I'm not sure what the purpose of this 150px is...
Author
Owner

@Gusted commented on GitHub (Jun 19, 2022):

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

https://github.com/go-gitea/gitea/pull/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.

@Gusted commented on GitHub (Jun 19, 2022): > I'm not sure what the purpose of this 150px is... https://github.com/go-gitea/gitea/pull/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.
Author
Owner

@zeripath commented on GitHub (Jun 20, 2022):

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>

@zeripath commented on GitHub (Jun 20, 2022): > > 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>`
Author
Owner

@Gusted commented on GitHub (Jun 22, 2022):

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.

@Gusted commented on GitHub (Jun 22, 2022): > 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.
Author
Owner

@Fogapod commented on GitHub (Jun 26, 2022):

Screenshot_20220626-102629_Brave

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

@Fogapod commented on GitHub (Jun 26, 2022): ![Screenshot_20220626-102629_Brave](https://user-images.githubusercontent.com/22667809/175804189-c74c6b67-1811-4a4c-9c8f-80df60a10e53.png) same thing happens when file is opened even though limit seem slightly higher there
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#9087