changes the styling of the chat content with grid instead of flexbox
@import 'connection-message';
@import 'connection-agreement';
+$messageBoxPadding: 0.5rem;
@media (max-width: $responsivenessBreakPoint) {
won-visitor-title-bar.hidden,
box-sizing: border-box;
- @include max-content-width($maxContentWidth / 2, $minContentPadding, 'post-messages');
-
- .post-messages__inner {
display: flex;
justify-content: center;
- flex-wrap: wrap;
- align-items: flex-start;
- height: 100%;
- }
+ align-content: center;
+ flex-direction: row;
+ padding: $messageBoxPadding;
won-post-messages{
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-areas: "header" "main" "footer";
+ grid-template-rows: min-content minmax(10rem, 1fr) min-content;
+ grid-row-gap: $messageBoxPadding;
width: 100%;
- height: 100%;
+ box-sizing: border-box;
.pm__header {
display:flex;
+ grid-area: header;
font-size: $normalFontSize;
text-align: left;
width: 100%;
- padding: 0.5rem 0;
&__title{
flex-grow:2;
}
.pm__footer {
- margin-bottom: 1rem;
+ grid-area: footer;
+
+ &__agreement {
+ display: block;
+ }
+
+ &__rdfinput {
+ display: flex;
+ padding: 0.5rem 0;
+ min-height: 3.25rem;
+ }
}
.pm__content {
padding: 1rem;
- margin-bottom: 1rem;
background: white;
border: $thinGrayBorder;
overflow: auto;
