076582edc3
- don't pronounce avatar initials - prevent room header growing wider than screen - ensure messages wrap their text
63 lines
1,004 B
CSS
63 lines
1,004 B
CSS
html {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.SessionView {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
.SessionView > .main {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
/* mobile layout */
|
|
@media screen and (max-width: 800px) {
|
|
.RoomHeader button.back { display: block; }
|
|
div.RoomView, div.RoomPlaceholderView { display: none; }
|
|
div.LeftPanel {flex-grow: 1;}
|
|
div.room-shown div.RoomView { display: flex; }
|
|
div.room-shown div.LeftPanel { display: none; }
|
|
div.right-shown div.TimelinePanel { display: none; }
|
|
}
|
|
|
|
.LeftPanel {
|
|
flex: 0 0 300px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.RoomPlaceholderView, .RoomView {
|
|
flex: 1 0 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.RoomView {
|
|
min-width: 0;
|
|
display: flex;
|
|
}
|
|
|
|
|
|
.TimelinePanel {
|
|
flex: 3;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.TimelinePanel ul {
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.RoomHeader {
|
|
display: flex;
|
|
}
|