Merge pull request #1485 from kendallcorner/master
Fixed #766 — Popup display expands to fit overflow menu
This commit is contained in:
commit
2badd22f41
2 changed files with 18 additions and 5 deletions
|
@ -19,8 +19,8 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif;
|
font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif;
|
||||||
inline-size: 300px;
|
inline-size: calc(var(--overflow-size) + 299px);
|
||||||
max-inline-size: 300px;
|
max-inline-size: calc(var(--overflow-size) + 299px);
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
@ -45,8 +45,10 @@ body {
|
||||||
--small-text-size: 0.833rem; /* 10px */
|
--small-text-size: 0.833rem; /* 10px */
|
||||||
--small-radius: 3px;
|
--small-radius: 3px;
|
||||||
--icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
|
--icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
|
||||||
--column-panel-inline-size: 268px;
|
--column-panel-inline-size: calc(var(--overflow-size) + 267px);
|
||||||
--inactive-opacity: 0.3;
|
--inactive-opacity: 0.3;
|
||||||
|
--overflow-size: 1px;
|
||||||
|
--icon-fit: 8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-resolution: 1dppx) {
|
@media (min-resolution: 1dppx) {
|
||||||
|
@ -577,7 +579,7 @@ span ~ .panel-header-text {
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-containers-panel .userContext-wrapper {
|
.edit-containers-panel .userContext-wrapper {
|
||||||
max-inline-size: 204px;
|
max-inline-size: calc(var(--overflow-size) + 203px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disable-edit-containers {
|
.disable-edit-containers {
|
||||||
|
@ -822,7 +824,7 @@ span ~ .panel-header-text {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
block-size: 29px;
|
block-size: 29px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0 0 calc(100% / 8);
|
flex: 0 0 calc(100% / var(--icon-fit));
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-choice > .radio-container > label {
|
.radio-choice > .radio-container > label {
|
||||||
|
|
|
@ -1144,3 +1144,14 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, {
|
||||||
});
|
});
|
||||||
|
|
||||||
Logic.init();
|
Logic.init();
|
||||||
|
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
//for overflow menu
|
||||||
|
const difference = window.innerWidth - document.body.offsetWidth;
|
||||||
|
if (difference > 2) {
|
||||||
|
//if popup is in the overflow menu, window will be larger than 300px
|
||||||
|
const root = document.documentElement;
|
||||||
|
root.style.setProperty("--overflow-size", difference + "px");
|
||||||
|
root.style.setProperty("--icon-fit", "12");
|
||||||
|
}
|
||||||
|
});
|
Loading…
Add table
Reference in a new issue