Stowage/forgejo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-12-07 14:09:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): fix width of attached fomantic segments (#10240)

Browse source 
The REAME on a repositories home page is 2px wider than the other elements in the main container. 1px on each side.

There appear to be at least 330 files that have one of these styles, I have tried to go through the UI and look for any regressions, but I may have missed some.
```sh
rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\bheader\b)' --pcre2|wc
275
rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\bsegment\b)' --pcre2|wc
330
rg '(?=.*\bui\b)(?=.*\battached\b)(?=.*\btable\b)' --pcre2|wc
56
```

I tried to track down the origin. I found the following information.

The behavior originates in semantic-ui, and was carried on in the fomantic-ui fork. It looks like the author was trying to achieve a 1px box-shadow look, but decided to implement it using a border after poor results with box-shadow.

* attachedHorizontalOffset introduced, a623e4411c
* attachedHorizontalOffset used for the margin on `.ui.segment.attached`, 5c7d5f13d8 (diff-ce37074faff5ddf9591ee8fd88818b6e99376519ce9e6e451cdb7db20dcbecf6R449)

I also found some upstream issues raised about the same bug:
* https://github.com/Semantic-Org/Semantic-UI/issues/3592
* https://github.com/Semantic-Org/Semantic-UI/issues/4248
* https://github.com/Semantic-Org/Semantic-UI/issues/6763
* https://github.com/fomantic/Fomantic-UI/issues/1401

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10240
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Magnus Jason <magnus@magnusjason.com>
Co-committed-by: Magnus Jason <magnus@magnusjason.com>
This commit is contained in:
Magnus Jason 2025-11-30 17:13:23 +01:00 • committed by Gusted
parent d4068e6bcf
commit 36ea60023a
3 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web_src/css/modules/header.css
View file

@ -96,7 +96,7 @@ h4.ui.header .sub.header {
position: relative;
background: var(--color-box-header);
padding: 0.78571429rem 1rem;
margin: 0 -1px;
margin: 0;
border-radius: 0;
border: 1px solid var(--color-secondary);
}

6
web_src/css/modules/segment.css
View file

@ -141,9 +141,9 @@
top: 0;
bottom: 0;
border-radius: 0;
margin: 0 -1px;
width: calc(100% + 2px);
max-width: calc(100% + 2px);
margin: 0;
width: 100%;
max-width: 100%;
box-shadow: none;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);

6
web_src/css/modules/table.css
View file

@ -196,9 +196,9 @@
top: 0;
bottom: 0;
border-radius: 0;
margin: 0 -1px;
width: calc(100% + 2px);
max-width: calc(100% + 2px);
margin: 0;
width: 100%;
max-width: 100%;
border: 1px solid var(--color-secondary);
}
.ui.attached + .ui.attached.table:not(.top) {