diff --git a/assets/css/common/measurements.css b/assets/css/common/measurements.css index da613005..3135fcba 100644 --- a/assets/css/common/measurements.css +++ b/assets/css/common/measurements.css @@ -41,4 +41,5 @@ $image-large-size: 512px; --block-header-sub-height: 26px; --block-spacing: 6px; --media-box-header-height: 22px; + --reduced-communication-avatar-size: 75px; } diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index 62eb88aa..3901f24c 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -126,7 +126,7 @@ span.communication__sender__stats, } .communication__body__sender { - width: calc(100vw - 12px - 125px); + width: calc(100vw - 12px - var(--reduced-communication-avatar-size)); grid-area: 1 / 2 / 2 / 3; } diff --git a/assets/css/views/profiles.css b/assets/css/views/profiles.css index 3a0caeaf..05cf8b63 100644 --- a/assets/css/views/profiles.css +++ b/assets/css/views/profiles.css @@ -130,3 +130,16 @@ td.table--stats__sparkline { width: 125px; height: 125px; } + +/* Mobile layout fixes */ +@media (max-width: $min-desktop-width) { + .avatar--100px { + width: var(--reduced-communication-avatar-size); + height: var(--reduced-communication-avatar-size); + } + + .avatar--125px { + width: var(--reduced-communication-avatar-size); + height: var(--reduced-communication-avatar-size); + } +}