My suggestion to make the solved tag and all other tags visible at (almost) any time:
@media (min-width: 768px) {
.IndexPage .DiscussionListItem-title,
.UserPage .DiscussionListItem-title {
margin-right: 5px; /* was: 155px */
}
.IndexPage .DiscussionListItem-info > .item-tags,
.UserPage .DiscussionListItem-info > .item-tags {
font-size: 11px; /* was: 12px */
margin-right: 4px; /* was: 0px */
max-width: none; /* was: 150px */
overflow: visible; /* was: hidden */
position: static; /* was: absolute */
right: auto; /* was: 80px; */
top: auto; /* was: 14px; */
transition: none 0s ease 0s ; /* was: max-width 0.2s ease-in-out 0s, -webkit-mask-image 0.2s ease 0s; */
white-space: inherit; /* was: nowrap */
}
.IndexPage .DiscussionListItem-info > .item-tags:hover,
.UserPage .DiscussionListItem-info > .item-tags:hover {
max-width: none; /* was: 400px */
}
.DiscussionListItem-info .item-excerpt {
margin-right: 0px; /* was: 170px */
}
}
HTH - Michael Sy.
@andi @ach
1. Edit: Functional description: With the current layout of the forum and a window width of less than 768 pixels, the tags are displayed in the second line, below the title. This CSS ensures that this form is also used for widths larger than 768 pixels.
2. Edit: Related Flarum's community issues:
https://discuss.flarum.org/d/22526-post-tags-partially-hidden
(I am not a friend of the solution presented there. But that depends on the case of application also.)
Custom CSS not overridnig extension's CSS (@Github)
=> Perhaps it is necessary to insert !important
all the times:
@media (min-width: 768px) {
.IndexPage .DiscussionListItem-title,
.UserPage .DiscussionListItem-title {
margin-right: 5px !important; /* was: 155px */
}
.IndexPage .DiscussionListItem-info > .item-tags,
.UserPage .DiscussionListItem-info > .item-tags {
font-size: 11px !important; /* was: 12px */
margin-right: 4px !important; /* was: 0px */
max-width: none !important; /* was: 150px */
overflow: visible !important; /* was: hidden */
position: static !important; /* was: absolute */
right: auto !important; /* was: 80px; */
top: auto !important; /* was: 14px; */
transition: none 0s ease 0s !important; /* was: max-width 0.2s ease-in-out 0s, -webkit-mask-image 0.2s ease 0s; */
white-space: inherit !important; /* was: nowrap */
}
.IndexPage .DiscussionListItem-info > .item-tags:hover,
.UserPage .DiscussionListItem-info > .item-tags:hover {
max-width: none !important; /* was: 400px */
}
.DiscussionListItem-info .item-excerpt {
margin-right: 0px !important; /* was: 170px */
}
}
BTW: I hate !important
in productive use.