Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork6.4k
Repo homepage styling tweaks#33289
Conversation
Reduce it to a value that results in `.repo-home-sidebar-top` and`.repo-home-sidebar-bottom` having 240px content width, the same asGitHub.
silverwind commentedJan 15, 2025
Adding backport as I would like to have this in 1.23, and it's a stylistic change only. |
yp05327 commentedJan 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
lunny commentedJan 16, 2025
wxiaoguang commentedJan 16, 2025
Same for me. |
silverwind commentedJan 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
silverwind commentedJan 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
Ah, I see the 240px comes from a userstyle of mine that sets |
yp05327 commentedJan 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
silverwind commentedJan 16, 2025
Yes, that makes sense. On a small screen like mine, 300px is too much. On big screen, it's ok. I will add a CSS variable, WIP until then. |
silverwind commentedJan 22, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
I ended up just matching GitHub's 296px now, e.g. 4px smaller sidebar now. Also I changed padding to gap, using the CSS variable, so spacing is now 2px larger. Minor, but still worth a backport imho 😉 |
silverwind commentedJan 23, 2025
Added a CSS variable for it and used it on issue sidebar as well which was also 300px. |
yp05327 commentedJan 23, 2025
silverwind commentedJan 23, 2025
yp05327 commentedJan 23, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
It is the width in main branch, not from this PR.
|
silverwind commentedJan 23, 2025
You're right. Main branch content width is 300px - 1rem, which is 286px. |
silverwind commentedJan 23, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
Let's just call the PR an adjustment then:
Would have liked to go a bit lower, but the issue sidebar does not work well with lower values, so I guess best is to keep the width and keep them the same. |
silverwind commentedJan 23, 2025
silverwind commentedJan 23, 2025
Ah I think it's actually not a good idea to couple these sidebars just yet because one has padding and the other not. So I ended up reverting and reducing the sidebar width very slightly from 286px to 280px. |
hiifong commentedJan 23, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
silverwind commentedJan 23, 2025
No, as you showed in#33289 (comment), they only downsize it starting at 768px width, but at that breakpoint, gitea switches to single-column layout, so there is no point at altering the size at 768px. |
642e8c1 intogo-gitea:mainUh oh!
There was an error while loading.Please reload this page.
Reduce it to a value that results in `.repo-home-sidebar-top` and`.repo-home-sidebar-bottom` having 240px content width, the same asGitHub.Before:<img width="1333" alt="Screenshot 2025-01-15 at 18 28 34"src="https://github.com/user-attachments/assets/cf0fa21b-87be-40e3-a6cd-26d146bce9cc"/>After:<img width="1330" alt="Screenshot 2025-01-15 at 18 28 27"src="https://github.com/user-attachments/assets/28acd837-10f4-4176-b8a0-510cd28c8b8d"/>
Backport#33289 by@silverwindReduce it to a value that results in `.repo-home-sidebar-top` and`.repo-home-sidebar-bottom` having 240px content width, the same asGitHub.Co-authored-by: silverwind <me@silverwind.io>











Reduce it to a value that results in
.repo-home-sidebar-topand.repo-home-sidebar-bottomhaving 240px content width, the same as GitHub.Before:

After:
