fix: improve autosuggest styles on small screens (#1529)

This commit is contained in:
Nolan Lawson 2019-09-24 00:50:25 -07:00 committed by GitHub
parent 91c491fd8d
commit fbed5b8ac8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 1 deletions

View file

@ -46,6 +46,17 @@
} }
} }
@media (max-width: 240px) {
.compose-autosuggest {
width: calc(100vw - 10px);
transform: translateX(-29px); /* avatar size 24px + 5px padding */
}
.compose-autosuggest.is-dialog {
transform: translateX(-34px); /* avatar size 24px + 10px padding */
width: calc(100vw - 20px); /* extra padding when within the dialog */
}
}
</style> </style>
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'

View file

@ -15,7 +15,7 @@
{#if type === 'account'} {#if type === 'account'}
<div class="compose-autosuggest-list-item-avatar"> <div class="compose-autosuggest-list-item-avatar">
<Avatar <Avatar
size="small" size="{$isVeryTinyMobileSize ? 'extra-small' : 'small'}"
account={item} account={item}
/> />
</div> </div>
@ -100,6 +100,15 @@
.compose-autosuggest-list-item:active { .compose-autosuggest-list-item:active {
background: var(--compose-autosuggest-item-active); background: var(--compose-autosuggest-item-active);
} }
@media (max-width: 320px) {
.compose-autosuggest-list-item {
padding: 5px;
}
.compose-autosuggest-list-grid {
grid-column-gap: 5px;
}
}
</style> </style>
<script> <script>
import Avatar from '../Avatar.html' import Avatar from '../Avatar.html'