2
0
Commit Graph

538 Commits

Author SHA1 Message Date
Luca Söthe
e51ab8a560 Add automatic light/dark option for the colorblind theme (#31997)
The normal themes already have a variant which automatically chooses
light/dark mode based on the browser.
This PR adds the same variant, but for the colorblind themes.
2024-09-07 03:09:40 +00:00
Simon Priet
9ec180db66 Scroll images in project issues separately from the remaining issue (#31683)
As discussed in #31667 & #26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue #31667 is open to discussion as there should be room for
improvement.
2024-08-13 07:36:28 +08:00
silverwind
8d011a1fbb Add :focus-visible style to buttons (#31799)
Buttons now show a focus style via
[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
when the browser deems the focus to be important, like for example when
the button is focused via keyboard navigation.

<img width="492" alt="Screenshot 2024-08-07 at 22 12 51"
src="https://github.com/user-attachments/assets/060568b1-1599-4c56-bafb-b36ebb1bec35">
<img width="479" alt="image"
src="https://github.com/user-attachments/assets/885f4e10-f496-47f0-8ae5-45827ded09f8">
2024-08-12 00:40:18 +00:00
silverwind
9086315d77 Remove unneccessary uses of word-break: break-all (#31637)
Fixes: https://github.com/go-gitea/gitea/issues/31636

1. Issue sidebar topic is disussed in
https://github.com/go-gitea/gitea/issues/31636
2. Org description already has `overflow-wrap: anywhere` to ensure no
overflow.

Co-authored-by: Giteabot <teabot@gitea.io>
2024-07-17 12:04:28 +02:00
silverwind
e100064989 Code editor theme enhancements (#31629)
1. Fixed border-radius
2. Monaco ignores the alpha channel on the shadow color, introduce
`color-shadow-opaque`
3. Remove scrollbar color which follows
https://github.com/go-gitea/gitea/pull/29800

Before:

<img width="34" alt="Screenshot 2024-07-13 at 15 38 18"
src="https://github.com/user-attachments/assets/042d9bde-6db9-4467-a2a4-8f61ecc773eb">
<img width="35" alt="Screenshot 2024-07-13 at 15 38 31"
src="https://github.com/user-attachments/assets/04146ee0-551c-4ff2-9636-bd119b33595a">


After:

<img width="45" alt="Screenshot 2024-07-13 at 15 38 06"
src="https://github.com/user-attachments/assets/1f58fa5a-1289-4e45-83c9-18ca82a5e266">
<img width="39" alt="Screenshot 2024-07-13 at 21 16 56"
src="https://github.com/user-attachments/assets/e12ebe22-b29b-4798-9f0d-4c100f311562">
2024-07-14 23:22:48 +00:00
Anbraten
b17d3af676 Refactor login page (#31530)
As requested in
https://github.com/go-gitea/gitea/pull/31504#issuecomment-2196196646.
This PR refactor the login page:

![Screenshot from 2024-07-04
19-23-10](https://github.com/go-gitea/gitea/assets/6918444/c45700f4-6747-473c-bdee-2156718a7953)

![Screenshot from 2024-07-04
19-23-21](https://github.com/go-gitea/gitea/assets/6918444/b1bf71cf-85f9-4517-a409-cc6d72e6af8f)

![Screenshot from 2024-06-30
09-35-20](https://github.com/go-gitea/gitea/assets/6918444/728cc37e-0cca-4883-afec-a43663d2c666)


# Changes
- [x] use separate box for passkey login and go to registration
- [x] move forgot passoword next to password label
- [x] fix password required label `*` and padding 
- [x] remove tabs from login page

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-07-05 20:10:09 +03:00
silverwind
25db34e2e0 Always use HTML attributes for avatar size (#31509)
Many avatars were rendered in HTML with certain width/height but then
resized again in CSS. This was pointless so I removed all these cases
and made the HTML size match the previous render size.

Also did a few CSS cleanups in the tribute rendering:

<img width="648" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/cb2fafb3-5e20-46e9-814f-07df20038beb">
2024-06-28 21:29:15 +00:00
charles
07c7290603 Fix avatar radius problem on the new issue page (#31506)
Close #31502

Related to #31419.

In this PR, the avatar width is set to 3em, but the height is not set,
so the image is not squared.

When object-fit is set to contain, it can't maintain the radius of the
image.

Result:

![圖片](https://github.com/go-gitea/gitea/assets/30816317/bceb98aa-b0f7-4753-bc8b-3b9c41dfd55a)
2024-06-27 14:04:05 +00:00
wxiaoguang
714ea1b892 Make toast support preventDuplicates (#31501)
make preventDuplicates default to true, users get a clear UI feedback
and know that "a new message appears".

Fixes: https://github.com/go-gitea/gitea/issues/26651

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-06-27 13:58:38 +00:00
Brecht Van Lommel
a5fab611df Fix poor table column width due to breaking words (#31473)
Caused by #31091

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-06-24 17:48:43 +00:00
wxiaoguang
21b46ea180 Simplify 404/500 page (#31409) 2024-06-23 17:45:21 +00:00
Brecht Van Lommel
ea785326d1 Fix labels and projects menu overflow on issue page (#31435)
It was correct only on the new issue page.

Resolves #31415
2024-06-20 16:54:19 +00:00
silverwind
80d368ed2a Fix new issue/pr avatar (#31419)
The avatar on "New Issue" and "New Pull Request" pages was inconsistent.
Removed the extra margin and the new CSS rules now use common parent
`<form id="#new-issue">` because `.repository.new.issue` is not present
on pull request page.
2024-06-19 16:19:59 +00:00
wxiaoguang
734d2ee499 Improve detecting empty files (#31332)
Co-authored-by: silverwind <me@silverwind.io>
2024-06-13 01:06:46 +00:00
silverwind
72eb9695ad Fix line number widths (#31341)
Fixes regression
https://github.com/go-gitea/gitea/pull/31307#issuecomment-2162554913

Table CSS is weird. A `auto` value does not work and causes the
regression while any pixel value causes another regression in diff where
the code lines do not stretch. Partially revert that PR and clean up
some related too-deep CSS selectors.

<img width="109" alt="Screenshot 2024-06-12 at 15 07 22"
src="https://github.com/go-gitea/gitea/assets/115237/756c5dea-44b8-49f9-8a08-acef68075f62">
<img width="119" alt="Screenshot 2024-06-12 at 15 07 43"
src="https://github.com/go-gitea/gitea/assets/115237/28ae1adc-118e-4016-8d09-033b9f1c9a6f">
<img width="151" alt="Screenshot 2024-06-12 at 15 07 07"
src="https://github.com/go-gitea/gitea/assets/115237/08db7ed9-de4e-405e-874d-c7ebe3082557">
<img width="141" alt="Screenshot 2024-06-12 at 15 07 14"
src="https://github.com/go-gitea/gitea/assets/115237/c4a5492b-1bf1-4773-bc8d-64eb36d823f9">
2024-06-12 15:23:42 +00:00
silverwind
7aec263cd8 Fix navbar + menu flashing on page load (#31281)
Fixes
https://github.com/go-gitea/gitea/pull/31273#issuecomment-2153771331.
Same method as used in https://github.com/go-gitea/gitea/pull/30215. All
left-opening dropdowns need to use it method.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-06-12 14:58:03 +00:00
silverwind
f5602a7ef6 Fix line number width in code preview (#31307)
Line numbers were using some hacky CSS `width: 1%` that did nothing to
the code rendering as far as I can tell but broken the inline preview in
markup when line numbers are greater than 2 digits. Also I removed one
duplicate `font-family` rule (it is set below in the `.lines-num,
.lines-code` selector.
2024-06-11 04:54:39 +00:00
Kerwin Bryant
ad7fd2565a Optimize repo-list layout to enhance visual experience (#31272)
before: 

![1717655078227](https://github.com/go-gitea/gitea/assets/3371163/4d564f96-c2f8-46b1-996f-6cc7abb940ef)
***The problem was that the icon and text were not on a horizontal line,
and the horizontal was not centered;***

after: 

![1717655094071](https://github.com/go-gitea/gitea/assets/3371163/b11797f6-05f8-486c-b5fd-df89d0cbdcfd)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-06-07 01:22:03 +02:00
silverwind
74a9c1e425 Replace gt-word-break with tw-break-anywhere (#31183)
`overflow-wrap: anywhere` is a superior alternative to `word-wrap:
break-word` and we were already setting it in the class. I tested a few
cases, all look good.
2024-06-04 13:57:11 +00:00
silverwind
1107dd6d2f Remove .segment from .project-column (#31204)
Using `.segment` on the project columns is a major abuse of that class,
so remove it and instead set the border-radius directly on it.

Fixes: https://github.com/go-gitea/gitea/issues/31129
2024-06-04 07:46:05 +00:00
silverwind
fc4bbc0bac Move custom tw- helpers to tailwind plugin (#31184)
Move the previous custom `tw-` classes to be defined in a tailwind
plugin. I think it's cleaner that way and I also verified double-class
works as expected:

<img width="299" alt="Screenshot 2024-05-30 at 19 06 24"
src="https://github.com/go-gitea/gitea/assets/115237/003cbc76-2013-46a0-9e27-63023fa7c7a4">
2024-06-03 18:21:28 +00:00
silverwind
ff3bfd54f9 Remove unnecessary inline style for tab-size (#31224)
Move the rule to the parent node. `tab-size` is inherited so will work
just as before.
2024-06-03 17:21:45 +00:00
silverwind
a5a48cb3d7 Use vertical layout for multiple code expander buttons (#31122)
Fixes: https://github.com/go-gitea/gitea/issues/31068

- Now it only does a single call to `GetExpandDirection` per line
instead of multiples.
- Exposed `data-expand-direction` to frontend so it can correctly size
the buttons (it's a pain to do in tables).

<img width="142" alt="Screenshot 2024-05-27 at 20 44 56"
src="https://github.com/go-gitea/gitea/assets/115237/8b0b45a6-8e50-4081-8822-5e0775d8d941">
<img width="142" alt="Screenshot 2024-05-27 at 20 44 51"
src="https://github.com/go-gitea/gitea/assets/115237/b7ba2c57-8f55-4e9f-9606-c96d16b77892">
<img width="132" alt="Screenshot 2024-05-27 at 20 44 46"
src="https://github.com/go-gitea/gitea/assets/115237/0e838fb8-5e8c-4250-9843-a68b88d5418b">
<img width="80" alt="Screenshot 2024-05-27 at 20 44 33"
src="https://github.com/go-gitea/gitea/assets/115237/da6c7f83-c160-4389-8ab2-889d0568cbe8">
<img width="80" alt="Screenshot 2024-05-27 at 20 44 26"
src="https://github.com/go-gitea/gitea/assets/115237/cdb490b2-5040-484a-92e5-46fc5e37c199">
<img width="78" alt="Screenshot 2024-05-27 at 20 44 20"
src="https://github.com/go-gitea/gitea/assets/115237/d2978ab0-764e-41ff-922c-25f8fe749f28">

Would backport as trivial enhancement.
2024-05-29 06:08:45 +00:00
silverwind
38862baf26 Improve mobile review ui (#31091)
Fixes: https://github.com/go-gitea/gitea/issues/31071

Not perfect but much better than before.

Before: Overflows, sticky not working, filename unreadable:

<img width="506" alt="Screenshot 2024-05-27 at 02 02 40"
src="https://github.com/go-gitea/gitea/assets/115237/a06b1edf-dece-4402-98c2-68670fca265f">

After:
<img width="457" alt="Screenshot 2024-05-27 at 01 59 06"
src="https://github.com/go-gitea/gitea/assets/115237/2a282c96-e719-4554-b418-81963ae6269c">
2024-05-28 13:41:37 +00:00
Lunny Xiao
078c246de9 Rename project board -> column to make the UI less confusing (#30170)
This PR split the `Board` into two parts. One is the struct has been
renamed to `Column` and the second we have a `Template Type`.

But to make it easier to review, this PR will not change the database
schemas, they are just renames. The database schema changes could be in
future PRs.

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: yp05327 <576951401@qq.com>
2024-05-27 08:59:54 +00:00
silverwind
bf22dbf6d1 Prevent tab shifting, remove extra margin on fluid pages (#31090)
1. Extend concept of https://github.com/go-gitea/gitea/pull/29831 to all
tabular menus, there were only three left that weren't already
`<overflow-menu>`.

<img width="634" alt="Screenshot 2024-05-27 at 00 42 16"
src="https://github.com/go-gitea/gitea/assets/115237/d9a7e219-d05e-40a1-9e93-777f9a8a90dd">
<img width="965" alt="Screenshot 2024-05-27 at 00 29 32"
src="https://github.com/go-gitea/gitea/assets/115237/e6ed71b1-11fb-4a74-9adb-af4524286cff">

2. Remove extra padding on `fluid padded` container like for example PR
diff view. The page margin is already correctly sized via
`.ui.container`, so this was just extraneous padding that looked ugly.

Before:
<img width="1351" alt="Screenshot 2024-05-27 at 00 45 11"
src="https://github.com/go-gitea/gitea/assets/115237/4b45fd11-b1b2-4fbb-a618-26eb22be9472">

After:
<img width="1344" alt="Screenshot 2024-05-27 at 00 45 22"
src="https://github.com/go-gitea/gitea/assets/115237/d09593eb-6c7f-45e7-85b6-f0050047004b">

3. Replace `gt-word-break` with `tw-break-anywhere` in issue-title,
fixing overflow.

Before:
<img width="1333" alt="Screenshot 2024-05-27 at 00 50 14"
src="https://github.com/go-gitea/gitea/assets/115237/64d15d04-b456-401e-a972-df636965f0eb">

After:
<img width="1316" alt="Screenshot 2024-05-27 at 00 50 26"
src="https://github.com/go-gitea/gitea/assets/115237/ed1ce830-1408-414b-8263-eeaf773f52c8">
2024-05-27 06:45:16 +00:00
silverwind
9fadbd9c8e Fix border radius on hovered secondary menu (#31089)
Presumably a regression from
https://github.com/go-gitea/gitea/pull/30325, these menus were showing a
border radius on hover, which is fixed with this change.

<img width="154" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/eafdc1c5-3cf5-48d1-86c4-21c58f92cfaf">
2024-05-27 04:48:41 +00:00
silverwind
b8f0c05925 Change --border-radius-circle to --border-radius-full (#30936)
Percentage-based `border-radius` [creates undesirable
ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square
content. Instead, use pixel value and use same wording `full` like
tailwind does, but increast to 99999px over their 9999px.
2024-05-25 14:33:34 +00:00
wxiaoguang
8d6a93fe00 Fix project column title overflow (#31011)
By the way:
* Re-format the "color.go" to Golang code style
* Remove unused `overflow-y: scroll;` from `.project-column` because
there is `overflow: visible`
2024-05-20 05:21:01 +00:00
silverwind
b97b958af6 Restyle release list, fix branch dropdown (#30837)
Fixes https://github.com/go-gitea/gitea/issues/30821 and restyles the
release list.

Desktop:

<img width="1199" alt="Screenshot 2024-05-02 at 20 46 10"
src="https://github.com/go-gitea/gitea/assets/115237/bee92423-d4a9-4b26-8301-3a1e09eef4cd">


Mobile:

<img width="443" alt="Screenshot 2024-05-02 at 20 46 21"
src="https://github.com/go-gitea/gitea/assets/115237/42ecbae5-bdb6-4b16-a0ee-9c64daede68d">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-05-13 23:33:51 +02:00
silverwind
fcc10b8a7b Fix file path width in repo non-homepage view (#30951)
Fixes: https://github.com/go-gitea/gitea/issues/30940

<img width="1310" alt="Screenshot 2024-05-11 at 20 48 41"
src="https://github.com/go-gitea/gitea/assets/115237/f163dfd4-1299-421f-a99e-cd0c793e0e3d">
2024-05-12 04:02:25 +00:00
silverwind
986fa43118 Enable declaration-block-no-redundant-longhand-properties (#30950)
Enable
[`declaration-block-no-redundant-longhand-properties`](https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties/)
and autofix issues. The exclusions are because I find these two
shorthands to be harder to read.
2024-05-12 02:33:05 +00:00
silverwind
a585d3449a Use CSS inset shorthand (#30939)
Use [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
shorthand instead of longhands. There may be more cases but these ones I
was able to definitely identify.
2024-05-11 14:28:56 +00:00
wxiaoguang
3b305a7d5f Fix some UI regressions for commit list (#30920)
Close #30919

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-05-10 12:58:05 +00:00
silverwind
5de0ca1438 Forbid deprecated break-word in CSS (#30934)
Forbid
[deprecated](https://drafts.csswg.org/css-text-3/#word-break-property)
`break-word` and fix all occurences.

Regarding `overflow-wrap: break-word` vs `overflow-wrap: anywhere`:

Example of difference: https://jsfiddle.net/silverwind/1va6972r/

[Here](https://stackoverflow.com/questions/77651244) it says:

> The differences between normal, break-word and anywhere are only clear
if you are using width: min-content on the element containing the text,
and you also set a max-width. A pretty rare scenario.

I don't think this difference will make any practical impact as we are
not hitting this rare scenario.
2024-05-10 12:25:49 +00:00
wxiaoguang
845bfa5338 Add missing menu active item background back (#30897)
Fix #30578
2024-05-08 23:01:25 +00:00
wxiaoguang
6ec56ad698 Fix some UI problems (dropdown/container) (#30849)
Follow #30345
Follow #30547

`ellipsis` / `white-space` shouldn't be put on the general dropdown components.
2024-05-06 07:17:22 +00:00
wxiaoguang
9e03890cad Fix some UI problems (install/checkbox) (#30854)
Fix the space between the box and label for checkboxes, and fix incorrect usages in "repo-issue.js"
2024-05-06 06:32:05 +00:00
wxiaoguang
202d039455 Fix issue/PR title edit (#30858)
1. "enter" doesn't work (I think it is the last enter support for #14843)
2. if a branch name contains something like `&`, then the branch selector doesn't update
2024-05-05 13:09:41 +00:00
silverwind
ff50beff1b Improve repo button row layout (#30668)
Since there is now a second `<input>` in the repo buttons, we can make a
better-looking layout with no empty space, except on mobile.

Also I fixed one bug with focus border on clone panel.

## Large

<img width="1163" alt="Screenshot 2024-04-23 at 22 25 22"
src="https://github.com/go-gitea/gitea/assets/115237/8135a572-aa67-4672-ad49-b76b06890b52">

## Medium
<img width="870" alt="Screenshot 2024-04-23 at 22 25 34"
src="https://github.com/go-gitea/gitea/assets/115237/9e93f61c-3315-4a78-8328-8cefad5b50fa">

## Mobile
<img width="416" alt="Screenshot 2024-04-23 at 22 25 52"
src="https://github.com/go-gitea/gitea/assets/115237/859e341f-807a-48e6-8bcf-31715963216c">
2024-05-02 19:10:49 +00:00
silverwind
3e8ca149dd Add hover outline to heatmap squares (#30828)
Makes it easier to use because you see which square is currently
hovered:

<img width="314" alt="Screenshot 2024-05-02 at 15 38 20"
src="https://github.com/go-gitea/gitea/assets/115237/3a15dad1-2259-4f28-9fae-5cf6ad3d8798">

I did try a `scoped` style for this, but that did not work for some
reason.
2024-05-02 14:56:17 +00:00
wxiaoguang
f53f824ebe Fix issue card layout (#30800)
Fix #30788
2024-05-02 11:19:44 +00:00
wxiaoguang
de74da3833 Fix branch selector UI (#30803)
Fix  #30802
2024-05-02 10:45:23 +00:00
silverwind
feefd211bd Fix rounded border for segment followed by pagination (#30809)
Fixes https://github.com/go-gitea/gitea/issues/30673, specifically
https://github.com/go-gitea/gitea/issues/30673#issuecomment-2085329812.
2024-05-02 09:25:55 +00:00
silverwind
b4a84d5cba Rework and fix stopwatch (#30732)
Fixes https://github.com/go-gitea/gitea/issues/30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.
2024-04-30 14:52:46 +00:00
wxiaoguang
52d52a556a Right align the "Settings" menu item in overflow-menu (#30764)
I guess there could be enough people liking to make the Settings menu
item right aligned. As a site admin, I found it's easier to find the
right-aligned Settings menu item.

Tested with various sizes:

![image](https://github.com/go-gitea/gitea/assets/2114189/92836527-2cb2-4531-9296-233c5bd698f4)

![image](https://github.com/go-gitea/gitea/assets/2114189/3a0729fc-5e33-44b5-9fb4-3a4e787405b5)

![image](https://github.com/go-gitea/gitea/assets/2114189/9845ab6b-88e3-4e5a-8d6d-2b8af259d593)
2024-04-30 04:26:13 +00:00
silverwind
a4783c7977 Fix all rounded borders, change affected tab menus to pills (#30707)
Fixes https://github.com/go-gitea/gitea/issues/30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-29 20:53:15 +00:00
silverwind
0d13291464 Remove fomantic dimmer module (#30723)
Tested extensively using modal which is the only dependant.
2024-04-29 14:49:50 +00:00
silverwind
53dfad620b Issue card improvements (#30687)
Fixes https://github.com/go-gitea/gitea/issues/30682 and does a few
improvements:

- Use gap instead of margin/padding
- Don't render empty image div
- Remove `right floated` class that did nothing

<img width="406" alt="Screenshot 2024-04-24 at 20 21 20"
src="https://github.com/go-gitea/gitea/assets/115237/2fa88707-c2c4-40df-aee7-a684c3097ed0">

---------

Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
2024-04-27 13:35:26 +00:00
silverwind
28bd8d3d0f Improve diff stats bar (#30669)
Minor tweaks:

- Remove unnecessary `item` class which was causing unwanted padding to
be added.
- Add some padding and prevent wrapping so it looks better on mobile.
- Increase width by 4px.

<img width="116" alt="Screenshot 2024-04-24 at 00 15 07"
src="https://github.com/go-gitea/gitea/assets/115237/1f1cf54c-8053-4297-b309-71d9c2ceb9ee">
<img width="441" alt="Screenshot 2024-04-24 at 00 14 57"
src="https://github.com/go-gitea/gitea/assets/115237/2f3a33dc-edad-4b97-b64c-6812aae513cb">
2024-04-27 11:22:55 +00:00