Ensure tags don't affect the bubble shape or spill out of the container

This commit is contained in:
Jason Zimdars
2024-12-04 17:42:47 -06:00
parent 259bb4d8c3
commit 245e2ea3bd
4 changed files with 14 additions and 5 deletions
+7
View File
@@ -292,14 +292,21 @@
}
.bubble__tags{
--row-gap: 0;
font-size: var(--text-small);
margin-block-start: 0.3cqb;
max-inline-size: 75cqi;
.bubble__perma & {
font-size: var(--text-medium);
}
}
.bubble__tag {
max-inline-size: 75cqi;
}
.bubble__title {
-webkit-line-clamp: var(--lines, 5);
-webkit-box-orient: vertical;
+2 -2
View File
@@ -69,8 +69,8 @@
}
.gap-half {
column-gap: var(--inline-space-half);
row-gap: var(--block-space-half);
column-gap: var(--column-gap, var(--inline-space-half));
row-gap: var(--row-gap, var(--block-space-half));
}
/* Sizing */
+1 -1
View File
@@ -11,7 +11,7 @@
<% end %>
</h1>
<div class="bubble__tags flex align-end justify-center gap-half">
<div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
<%= render "bubbles/tags", bubble: bubble %>
</div>
</div>
+4 -2
View File
@@ -1,4 +1,6 @@
<% bubble.tags.each do |tag| %>
<%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
class: "btn btn--plain fill-transparent", style: "color: #{bubble.color}" %>
<%= link_to bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
class: "bubble__tag btn btn--plain fill-transparent min-width", style: "color: #{bubble.color}" do %>
<span class="overflow-ellipsis"><%= tag.hashtag %></span>
<% end %>
<% end %>