diff --git a/assets/components/tags/photos.vue b/assets/components/tags/photos.vue index d691a655..4cabe0e2 100644 --- a/assets/components/tags/photos.vue +++ b/assets/components/tags/photos.vue @@ -10,9 +10,11 @@ > .photos { width: 100%; - padding: .5rem 1rem 0 .5rem; + padding: .5rem 1rem 0 1rem; box-sizing: border-box; - overflow-x: auto; white-space: nowrap; - scrollbar-width: none; - scroll-behavior: smooth; font-size: 0; &::-webkit-scrollbar { @@ -112,9 +113,10 @@ export default { display: inline-block; position: relative; overflow: hidden; + margin: 0 .5rem 0 0; - &:not(:last-child) { - margin: 0 .5rem 0 0; + &:last-child { + margin: 0 1rem 0 0; } &:hover .photo-comment { @@ -127,6 +129,9 @@ export default { max-height: 15rem; max-width: 100%; box-shadow: 0 0 3px var(--shadow-weak); + object-fit: cover; + background-position: center; + background-size: cover; } .photo-comment { diff --git a/assets/components/tags/tag.vue b/assets/components/tags/tag.vue index 2d34bcb8..f02243ee 100644 --- a/assets/components/tags/tag.vue +++ b/assets/components/tags/tag.vue @@ -19,6 +19,7 @@ @@ -159,4 +161,8 @@ export default { color: var(--text-light); background: var(--profile); } + +.scroll { + background: var(--background-dim); +} diff --git a/assets/js/tags/actions.js b/assets/js/tags/actions.js index 1d90b7d5..63d2113a 100644 --- a/assets/js/tags/actions.js +++ b/assets/js/tags/actions.js @@ -37,11 +37,13 @@ function initTagsActions(store, _router) { media { id thumbnail + lazy path comment sfw: sfwMedia { id thumbnail + lazy path comment }