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

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 <[email protected]>
Co-authored-by: silverwind <[email protected]>

Author: 3 people

web_src/css/base.css

@@ -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;
 }

web_src/fomantic/.npmrc

@@ -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

web_src/fomantic/_site/globals/site.variables

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