Fix UI on little screens (form for anonymous users was too high).

This commit is contained in:
John Livingston 2024-04-23 10:05:56 +02:00
parent 2074ec8546
commit 2b6cd15951
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
3 changed files with 17 additions and 3 deletions

View File

@ -5,6 +5,7 @@
### Minor changes and fixes
* Fix #370: "open with a remote Peertube" broken when chat is embedded in an iframe.
* Fix UI on little screens (form for anonymous users was too high).
## 9.0.0

View File

@ -79,10 +79,16 @@
}
}
/* Note: livechat-viewer-mode-content (the form where anonymous users can
choose nickname or log in with external account), can be something like
~180px height (at time of writing).
We must ensure that the 200px limit for converse-muc and converse-root is
always higher than livechat-viewer-mode-content max size.
*/
#peertube-plugin-livechat-container converse-root {
display: block;
border: 1px solid black;
min-height: max(30vh, 200px);
min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
height: 100%;
converse-muc {

View File

@ -62,10 +62,16 @@ body.livechat-readonly.livechat-noscroll {
display: flex !important;
flex-flow: row wrap !important;
padding-bottom: 0.5em !important;
padding-top: 0.5em !important;
border-top: 1px solid var(--chatroom-head-bg-color) !important;
gap: 10px;
gap: 0.5em 10px;
align-items: baseline;
.form-group,
label {
margin-bottom: 0 !important; // replaced by the gap on .livechat-viewer-mode-content
}
label {
color: var(--text-color); // fix converseJs css that breaks this label color.
}
@ -77,7 +83,8 @@ body.livechat-readonly.livechat-noscroll {
}
.livechat-viewer-mode-external-login {
padding: 2em;
margin: 0.5em 0;
padding: 0;
}
}