fix: Manage the width to take scrollbars into account (#1138)
* Manage the width to take scrollbars into account * Additional modal layout styles changes
This commit is contained in:
parent
5642b10c72
commit
79184570b1
|
@ -16,7 +16,7 @@
|
|||
opacity: 0;
|
||||
transition: opacity 0.1s linear;
|
||||
min-width: 400px;
|
||||
max-width: calc(100vw - 20px);
|
||||
max-width: calc(100% - 20px);
|
||||
z-index: 7000;
|
||||
}
|
||||
.compose-autosuggest.is-dialog {
|
||||
|
|
|
@ -39,19 +39,12 @@
|
|||
"avatar toolbar toolbar length"
|
||||
"avatar media media media";
|
||||
grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
|
||||
width: 560px;
|
||||
max-width: calc(100vw - 40px);
|
||||
}
|
||||
|
||||
.compose-box.direct-reply {
|
||||
background-color: var(--status-direct-background);
|
||||
}
|
||||
|
||||
.compose-box.slim-size {
|
||||
width: 540px;
|
||||
max-width: calc(100vw - 60px);
|
||||
}
|
||||
|
||||
.compose-box-fade-in {
|
||||
transition: opacity 0.2s linear; /* main page reveal */
|
||||
}
|
||||
|
@ -69,13 +62,6 @@
|
|||
@media (max-width: 767px) {
|
||||
.compose-box {
|
||||
padding: 10px 10px 0 10px;
|
||||
max-width: calc(100vw - 20px);
|
||||
width: 580px;
|
||||
}
|
||||
|
||||
.compose-box.slim-size {
|
||||
width: 560px;
|
||||
max-width: calc(100vw - 40px);
|
||||
}
|
||||
|
||||
.compose-box-realm-dialog {
|
||||
|
@ -142,7 +128,6 @@
|
|||
'compose-box',
|
||||
`compose-box-realm-${realm}`,
|
||||
overLimit && 'over-char-limit',
|
||||
size === 'slim' && 'slim-size',
|
||||
isReply && postPrivacyKey === 'direct' && 'direct-reply'
|
||||
)),
|
||||
hideAndFadeIn: ({ hidden }) => (classname(
|
||||
|
|
|
@ -11,6 +11,8 @@
|
|||
.file-drop {
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-drop-info {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
{title}
|
||||
background="var(--main-bg)"
|
||||
>
|
||||
<ComposeBox realm="dialog" size="slim" autoFocus="true" />
|
||||
<ComposeBox realm="dialog" autoFocus="true" />
|
||||
</ModalDialog>
|
||||
<script>
|
||||
import ModalDialog from './ModalDialog.html'
|
||||
|
@ -37,4 +37,4 @@
|
|||
ComposeBox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
grid-gap: 10px;
|
||||
padding: 10px 20px;
|
||||
width: 400px;
|
||||
max-width: calc(100vw - 40px);
|
||||
max-width: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
@ -21,7 +21,6 @@
|
|||
border: 1px solid var(--settings-list-item-border);
|
||||
box-sizing: border-box;
|
||||
min-width: 350px;
|
||||
max-width: calc(100vw - 20px);
|
||||
}
|
||||
.generic-dialog-list-item {
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
|
@ -69,7 +68,7 @@
|
|||
|
||||
@media (max-width: 479px) {
|
||||
.generic-dialog-list {
|
||||
min-width: calc(100vw - 20px);
|
||||
min-width: calc(100% - 20px);
|
||||
}
|
||||
.generic-dialog-list-button {
|
||||
padding: 15px 10px;
|
||||
|
|
|
@ -79,7 +79,7 @@
|
|||
<Shortcut scope='modal-{id}' key="ArrowRight" on:pressed="next()" />
|
||||
<style>
|
||||
:global(.media-modal-dialog) {
|
||||
max-width: calc(100vw);
|
||||
max-width: calc(100%);
|
||||
}
|
||||
.media-container {
|
||||
height: calc(100% - 64px); /* 44px X button height + 20px padding */
|
||||
|
|
|
@ -59,6 +59,8 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: calc(100% - 20px);
|
||||
max-width: calc(100% - 20px);
|
||||
flex: 0 1 580px;
|
||||
}
|
||||
.modal-dialog-contents.should-animate {
|
||||
transition: opacity 0.2s linear;
|
||||
|
@ -69,7 +71,8 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: calc(100vw - 20px);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.modal-dialog-header {
|
||||
|
|
|
@ -129,7 +129,7 @@
|
|||
word-wrap: break-word;
|
||||
}
|
||||
:global(.report-dialog-contents .confirmation-dialog-form) {
|
||||
max-width: calc(100vw - 20px);
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
grid-row-gap: 5px;
|
||||
|
||||
overflow: hidden;
|
||||
max-width: calc(100vw - 40px);
|
||||
margin: 10px 10px 10px 5px;
|
||||
}
|
||||
|
||||
|
|
|
@ -47,7 +47,6 @@
|
|||
|
||||
<style>
|
||||
.status-article {
|
||||
max-width: calc(100vw - 40px);
|
||||
padding: 10px 20px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
|
@ -71,7 +70,6 @@
|
|||
}
|
||||
|
||||
.status-article.status-in-timeline {
|
||||
width: 560px;
|
||||
border-bottom: 1px solid var(--main-border);
|
||||
}
|
||||
|
||||
|
@ -104,10 +102,6 @@
|
|||
@media (max-width: 767px) {
|
||||
.status-article {
|
||||
padding: 10px 10px;
|
||||
max-width: calc(100vw - 20px);
|
||||
}
|
||||
.status-article.status-in-timeline {
|
||||
width: 580px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -27,7 +27,6 @@
|
|||
color: inherit;
|
||||
|
||||
overflow: hidden;
|
||||
max-width: calc(100vw - 40px);
|
||||
margin: 10px 10px 10px 5px;
|
||||
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<div class="status-article-compose-box">
|
||||
<ComposeBox realm={originalStatusId}
|
||||
size="slim"
|
||||
autoFocus="true"
|
||||
hideBottomBorder="true"
|
||||
isReply="true"
|
||||
|
@ -12,6 +11,7 @@
|
|||
<style>
|
||||
.status-article-compose-box {
|
||||
grid-area: compose;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
<style>
|
||||
.virtual-list {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
<style>
|
||||
.virtual-list-item {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
|
|
@ -52,7 +52,9 @@ body {
|
|||
main {
|
||||
position: relative;
|
||||
width: 602px;
|
||||
max-width: 100vw;
|
||||
// take into account scrollbars;
|
||||
// https://stackoverflow.com/a/34884924
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 30px auto 15px;
|
||||
|
|
Loading…
Reference in New Issue