Revert overflow: overlay (revert #21850) (#25231) (#25239)

Backport #25231 by @wxiaoguang

It causes not only one issue like #25221 (the footer width was also
affected by that change and was fixed some time ago)

The problem of "overflow: overlay" (#21850) is:

* It's not widely supported and is non-standard
https://caniuse.com/css-overflow-overlay
* It's not widely tested in Gitea (some standard layout like `ui
container + ui grid` may break it).
* The benefit seems smaller than the problems it brings.

So, I think it is good to revert it.

----

Let's leave enough time for testing and reviewing.

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot 2023-06-13 15:45:45 -04:00 committed by GitHub
parent fa28d0e706
commit 22948048b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 7345 additions and 16 deletions

View file

@ -266,19 +266,11 @@ body {
color: var(--color-text);
background-color: var(--color-body);
tab-size: var(--tab-size);
overflow-y: auto;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
}
@supports (overflow: overlay) {
body {
overflow: overlay; /* stylelint-disable-line */
scrollbar-gutter: stable;
}
}
table {
border-collapse: collapse;
}
@ -910,7 +902,7 @@ img.ui.avatar,
/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
.page-content .ui.ui.ui.container:not(.fluid) {
width: 1280px;
max-width: calc(100vw - 64px);
max-width: calc(100% - 64px);
margin-left: auto;
margin-right: auto;
}
@ -922,8 +914,7 @@ img.ui.avatar,
/* enable fluid page widths for medium size viewports */
@media (min-width: 768px) and (max-width: 1200px) {
.page-content .ui.ui.ui.container:not(.fluid) {
width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
max-width: calc(100% - 32px);
}
.ui.container.fluid.padded {
padding: 0 16px;
@ -932,8 +923,7 @@ img.ui.avatar,
@media (max-width: 767.98px) {
.page-content .ui.ui.ui.container:not(.fluid) {
width: calc(100vw - 16px);
max-width: calc(100vw - 16px);
max-width: calc(100% - 16px);
}
.ui.container.fluid.padded {
padding: 0 8px;
@ -945,7 +935,6 @@ img.ui.avatar,
align-items: center;
background: var(--color-nav-bg);
border-bottom: 1px solid var(--color-secondary);
width: 100vw;
min-height: 52px;
margin: 0 !important;
}

View file

@ -1,5 +1,7 @@
audit=false
fund=false
update-notifier=false
package-lock=false
package-lock=true
save-exact=true
lockfile-version=3
optional=false

View file

@ -8,3 +8,4 @@
@variationPopupTooltip: false;
@linkHoverUnderline: underline;
@variationButtonSocial: false;
@pageOverflowX: visible;

View file

@ -24658,7 +24658,7 @@ html {
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-x: visible;
min-width: 320px;
background: #FFFFFF;
font-family: var(--fonts-regular);

7337
web_src/fomantic/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff