tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-10-31 11:28:24 +00:00
Code Releases Activity

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

Browse Source 
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: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang
2023-06-14 03:17:14 +08:00
committed by GitHub
parent 8228751c55
commit 4f3253feb9
5 changed files with 7345 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web_src/css/base.css
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;
}