[Design Changes] Make the mobile layout more compact #8485

New Issue

GiteaMirror · 2025-11-02T08:08:09-06:00

GiteaMirror commented

2025-11-02 08:08:09 -06:00

Originally created by @schorsch13 on GitHub (Feb 4, 2022).

Introduction

In the mobile view there is a lot of spacing and padding in the directory list of a repo.

Proposal

FiliusPatris tried to inspect the directory list with the firefox devtools and was able to remove the unnecessary spacing with the following css:

.name {
	display: table-cell;
	max-width: 20%;
}

.message {
	display: table-cell;
	width: 100%;
}

.age {
	display: none;
}

Credits

The main idea and the proposed css changes come from the codeberg user FiliusPatris. For further information have a look at the issue on codeberg: https://codeberg.org/Codeberg/Community/issues/190

Originally created by @schorsch13 on GitHub (Feb 4, 2022). # Introduction In the mobile view there is a lot of spacing and padding in the directory list of a repo. ![image](https://user-images.githubusercontent.com/97637661/152488003-8ff8050e-698f-4fa2-b0a4-ae54915acfa4.png) # Proposal [FiliusPatris](https://codeberg.org/FiliusPatris) tried to inspect the directory list with the firefox devtools and was able to remove the unnecessary spacing with the following css: ```css .name { display: table-cell; max-width: 20%; } .message { display: table-cell; width: 100%; } .age { display: none; } ``` # Credits The main idea and the proposed css changes come from the codeberg user [FiliusPatris](https://codeberg.org/FiliusPatris). For further information have a look at the issue on codeberg: https://codeberg.org/Codeberg/Community/issues/190

GiteaMirror added the topic/ui label 2025-11-02 08:08:09 -06:00

GiteaMirror closed this issue

2025-11-02 08:08:09 -06:00

GiteaMirror commented

2025-11-02 08:08:10 -06:00

@n194 commented on GitHub (Feb 4, 2022):

#15005 fixes this, but that PR has stalled.

@n194 commented on GitHub (Feb 4, 2022): #15005 fixes this, but that PR has stalled.

GiteaMirror commented

2025-11-02 08:08:10 -06:00

@silverwind commented on GitHub (Feb 4, 2022):

display: table-cell is kind of a legacy CSS value that forces table layout which is its own can of worms. I suggest display: flex or display: grid with appropriate media queries.

Any yes, the current design is desktop-first, I doubt anyone really gave much thought to a proper mobile layout which can only be achieved with carefully placed media queries.

@silverwind commented on GitHub (Feb 4, 2022): `display: table-cell` is kind of a legacy CSS value that forces `table` layout which is its own can of worms. I suggest `display: flex` or `display: grid` with appropriate media queries. Any yes, the current design is desktop-first, I doubt anyone really gave much thought to a proper mobile layout which can only be achieved with carefully placed media queries.

GiteaMirror commented

2025-11-02 08:08:10 -06:00

@wxiaoguang commented on GitHub (May 3, 2022):

It should have been improved by

Great thanks to @Gusted

@wxiaoguang commented on GitHub (May 3, 2022): It should have been improved by * #19546 * #19515 Great thanks to @Gusted

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#8485