mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-25 17:26:18 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Flex-wrap buttons on dialogs to prevent overflowing

Browse source
This commit is contained in:
schlagmichdoch 2023-12-09 17:37:44 +01:00
parent 78b758b990
commit e7031cea90
3 changed files with 59 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

25
public/styles/deferred-styles.css
View file

@ -388,6 +388,10 @@ x-dialog a {
/* Pair Devices Dialog & Public Room Dialog */
#public-room-dialog x-paper {
width: 450px;
}
.input-key-container {
width: 100%;
display: flex;
@ -544,18 +548,14 @@ x-dialog hr {
}
/* button row*/
.btn-row > .btn {
height: 100%;
width: 100%;
}
.btn-row > .btn {
margin-right: 5px;
margin-left: 5px;
.btn-row .btn {
margin: 3px;
flex-grow: 1;
height: 50px;
width: 120px; /* fixed width needed to ensure same width for all buttons */
}
x-paper > .btn-row {
height: 50px;
margin: 5px 10px 10px;
}
@ -638,10 +638,11 @@ x-dialog .dialog-subheader {
}
.share-panel {
min-width: 250px;
max-width: calc(100vw - 20px);
overflow: hidden;
background-color: var(--primary-color);
color: white;
background-color: var(--primary-color);
background-image: linear-gradient(225deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 60%, black) 100%);
}
@ -677,6 +678,10 @@ x-dialog .dialog-subheader {
background-position: center;
}
.share-panel .btn {
height: 36px;
}
.share-descriptor {
justify-content: center;
}

35
public/styles/styles-main.css
View file

@ -48,16 +48,36 @@ html {
}
.m1 {
margin: 10px;
margin: 5px;
}
.cursive {
font-style: italic;
}
.row-reverse {
.wrap {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.wrap-reverse {
display: flex;
flex-wrap: wrap-reverse;
}
.grow {
display: flex;
flex-grow: 1;
}
.grow-2 {
display: flex;
flex-grow: 2;
}
.shrink {
display: flex;
flex-shrink: 1;
}
.flex {
@ -81,6 +101,11 @@ html {
flex-direction: row;
}
.row-reverse {
display: flex;
flex-direction: row-reverse;
}
.column {
display: flex;
flex-direction: column;
@ -92,10 +117,6 @@ html {
justify-content: center;
}
.grow {
flex-grow: 1;
}
.full {
position: absolute;
top: 0;