Set a max-width: 600px for group containers.

This commit is contained in:
Fabio Manganiello 2023-05-01 01:22:02 +02:00
parent 1e43866978
commit a3839e637d
Signed by: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -464,6 +464,10 @@ export default {
background: transparent; background: transparent;
border: 0; border: 0;
@include until($tablet) {
padding-right: 0;
}
&:hover { &:hover {
color: $default-hover-fg; color: $default-hover-fg;
} }
@ -480,13 +484,15 @@ export default {
width: 100%; width: 100%;
height: calc(100% - #{$selector-height}); height: calc(100% - #{$selector-height});
overflow: auto; overflow: auto;
@include until($tablet) {
padding: 0.5em;
}
} }
.groups-container { .groups-container {
@include until(#{$desktop - 1}) {
display: flex;
flex-direction: column;
align-items: center;
}
@include from($desktop) { @include from($desktop) {
column-count: var(--groups-per-row); column-count: var(--groups-per-row);
} }
@ -494,13 +500,14 @@ export default {
.group { .group {
width: 100%; width: 100%;
max-width: 600px;
max-height: 100%; max-height: 100%;
position: relative; position: relative;
padding: $main-margin 0; padding: $main-margin 0;
display: flex; display: flex;
break-inside: avoid; break-inside: avoid;
@include from ($tablet) { @include from($tablet) {
padding: $main-margin; padding: $main-margin;
} }