Make Set Language Dialog properly scrollable on mobile devices by using the styling of Pair Device and Public Room Dialogs.

This commit is contained in:
schlagmichdoch 2023-10-11 17:51:19 +02:00
parent 4854c816a4
commit 7a299a5c98
2 changed files with 24 additions and 22 deletions

View file

@ -718,10 +718,12 @@ x-dialog x-background {
}
x-dialog x-paper {
display: flex;
flex-direction: column;
width: calc(100vw - 10px);
z-index: 3;
background: white;
border-radius: 8px;
width: 100%;
max-width: 400px;
overflow: hidden;
box-sizing: border-box;
@ -729,6 +731,15 @@ x-dialog x-paper {
will-change: transform;
}
#pair-device-dialog x-paper,
#edit-paired-devices-dialog x-paper,
#public-room-dialog x-paper,
#language-select-dialog x-paper {
position: absolute;
top: max(50%, 350px);
margin-top: -328.5px;
}
x-paper > .row:first-of-type {
background-color: var(--accent-color);
border-bottom: solid 4px var(--border-color);
@ -748,16 +759,6 @@ x-paper > .row:first-of-type h2 {
--accent-color: var(--public-room-color);
}
#pair-device-dialog x-paper,
#public-room-dialog x-paper {
display: flex;
flex-direction: column;
position: absolute;
top: max(50%, 350px);
margin-top: -328.5px;
width: calc(100vw - 20px);
}
#pair-device-dialog ::-moz-selection,
#pair-device-dialog ::selection {
color: black;

View file

@ -748,10 +748,12 @@ x-dialog x-background {
}
x-dialog x-paper {
display: flex;
flex-direction: column;
width: calc(100vw - 10px);
z-index: 3;
background: white;
border-radius: 8px;
width: 100%;
max-width: 400px;
overflow: hidden;
box-sizing: border-box;
@ -759,6 +761,15 @@ x-dialog x-paper {
will-change: transform;
}
#pair-device-dialog x-paper,
#edit-paired-devices-dialog x-paper,
#public-room-dialog x-paper,
#language-select-dialog x-paper {
position: absolute;
top: max(50%, 350px);
margin-top: -328.5px;
}
x-paper > .row:first-of-type {
background-color: var(--accent-color);
border-bottom: solid 4px var(--border-color);
@ -778,16 +789,6 @@ x-paper > .row:first-of-type h2 {
--accent-color: var(--public-room-color);
}
#pair-device-dialog x-paper,
#public-room-dialog x-paper {
display: flex;
flex-direction: column;
position: absolute;
top: max(50%, 350px);
margin-top: -328.5px;
width: calc(100vw - 20px);
}
#pair-device-dialog ::-moz-selection,
#pair-device-dialog ::selection {
color: black;