Ensure tags don't affect the bubble shape or spill out of the container
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
Reference in New Issue
Block a user