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 @@
expanded = state"
@@ -26,6 +27,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
}