luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-05-14 05:52:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Fix wiki search overflowing on wide screens (#6047)

Browse source 
Confine the search menu to be at most the width of the page, or 80% of
the viewport width, whichever is smaller. To do this, introduce a new
`--container-width` variable for the descendant elements of
`.ui.container` to be able to access.

Also update the relevant e2e test: add a long 'lorem ipsum' page, add a
search for it, parameterize the width.
This commit is contained in:
Oto Šťáva 2024-11-24 16:41:09 +01:00
parent ad70e7dfb3
commit c0777279fe
No known key found for this signature in database
GPG key ID: 32B22D20C9B4E680
10 changed files with 65 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web_src/css/modules/container.css
View file

@ -3,12 +3,14 @@
.ui.container {
display: block;
max-width: 100%;
--container-width: 100%;
max-width: var(--container-width);
}
@media (max-width: 767.98px) {
.ui.ui.ui.container:not(.fluid) {
width: auto;
--container-width: auto;
width: var(--container-width);
margin-left: 1em;
margin-right: 1em;
}
@ -16,7 +18,8 @@
@media (min-width: 768px) and (max-width: 991.98px) {
.ui.ui.ui.container:not(.fluid) {
width: 723px;
--container-width: 723px;
width: var(--container-width);
margin-left: auto;
margin-right: auto;
}
@ -24,7 +27,8 @@
@media (min-width: 992px) and (max-width: 1199.98px) {
.ui.ui.ui.container:not(.fluid) {
width: 933px;
--container-width: 933px;
width: var(--container-width);
margin-left: auto;
margin-right: auto;
}
@ -32,14 +36,16 @@
@media (min-width: 1200px) {
.ui.ui.ui.container:not(.fluid) {
width: 1127px;
--container-width: 1127px;
width: var(--container-width);
margin-left: auto;
margin-right: auto;
}
}
.ui.fluid.container {
width: 100%;
--container-width: 100%;
width: var(--container-width);
}
.ui[class*="center aligned"].container {
@ -48,7 +54,8 @@
/* overwrite width of containers inside the main page content div (div with class "page-content") */
.page-content .ui.ui.ui.container:not(.fluid) {
width: 1280px;
--container-width: 1280px;
width: var(--container-width);
max-width: calc(100% - calc(2 * var(--page-margin-x)));
margin-left: auto;
margin-right: auto;