[Design Changes] Make the mobile layout more compact

[schorsch13]

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

[n194]

#15005 fixes this, but that PR has stalled.

[silverwind]

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.

[wxiaoguang]

It should have been improved by

• Improve UI on mobile #19546
• Make repository file list useable on mobile #19515

Great thanks to @Gusted