From 503953fb9bed25ae3b705164079dc835622acbe3 Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Fri, 31 May 2024 03:38:45 +0000 Subject: [PATCH] Unify vertical and horizontal paddings in markup file view (#3944) Use the same padding horizontally and vertically, so the views like readme look a bit nicer. Just slightly adjusted two values, nothing really test-able here. ## Motivation I came to the conclusion that they should be the same myself, later I checked GitHub and it turned out to also use the same paddings. I would like to notice that the padding here (2em = 32px) is the same as GitHub uses too. I find this as a logical UI change because the paddings are usually same on both axis across the UI (like on PR sidebar). Also updated paddings for when the files are shown in profile, but copied the `1.5em` that GitHub uses. This, once again, makes sense, because the overview markdown isn't the primary content, or as primary as the readme on the repo is, taking the full usable width. ## Preview https://codeberg.org/attachments/55f6685c-1978-410a-a17b-9fac91f0642e --- https://codeberg.org/attachments/d9016a1c-13cf-4ea6-a8e4-2619d93f3560 ## Note `.non-diff-file-content .plain-text` is left untouched with `1em 2em`, because the plaintext seems to add it's own margins, so it would make it look worse. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3944 Reviewed-by: Otto Reviewed-by: Beowulf --- web_src/css/repo.css | 2 +- web_src/css/user.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index ae80a2004..91a0c8c33 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1775,7 +1775,7 @@ td .commit-summary { } .file-view.markup { - padding: 1em 2em; + padding: 2em; } .repository .activity-header { display: flex; diff --git a/web_src/css/user.css b/web_src/css/user.css index 4b363ed10..16d431e2a 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -105,7 +105,7 @@ } #readme_profile { - padding: 1em 2em; + padding: 1.5em; background: var(--color-box-body); border: 1px solid var(--color-secondary); border-radius: var(--border-radius);