therealsujitk is it by design. The choice for the default width is probably a compromise in order to not hide too much of long titles.
When you move your mouse over the tags, they slide into view to reveal more of them. Unless you have very very long tag names, this should reveal all of them with the mouse.
If you wanted to change the default size, those appear to be the relevant styles from the tags extension:
@media @tablet-up {
.IndexPage, .UserPage {
.DiscussionListItem-title {
margin-right: 155px;
}
.DiscussionListItem-info > .item-tags {
max-width: 150px;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 140px, rgba(0,0,0,0) 150px);
&:hover {
max-width: 400px;
}
}
}
}
Those original styles from the tags extension can be found here https://github.com/flarum/tags/blob/d4c8049eab95990cd4f5c351896a7e50c38af3ca/less/forum.less#L33
To change the "no hover" width from 150px to 200px and the "hover" width from 400px to 500px for example, something like the following could work. Make sure to test with various screen sizes, as changing the size could create problems with the mobile view for example. I have only tested this quickly on my full HD screen.
!important
rules are needed because of this issue flarum/core1726
@media @tablet-up {
.IndexPage, .UserPage {
.DiscussionListItem-title {
margin-right: 205px !important; // Original is 155px
}
.DiscussionListItem-info > .item-tags {
max-width: 200px !important; // Original is 150px
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 190px, rgba(0,0,0,0) 200px) !important; // Original is 140px and 150px
&:hover {
max-width: 500px !important; // Original is 400px
-webkit-mask-image: none !important; // Repeating the original value with !important otherwise our other non-hover rule above would override it
}
}
}
}