diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 9b3a42b16..148384d85 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -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; diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 61aab22a4..60de39c8d 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -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 */ diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb index 0078e865d..09d680c94 100644 --- a/app/views/bubbles/_bubble.html.erb +++ b/app/views/bubbles/_bubble.html.erb @@ -11,7 +11,7 @@ <% end %> -
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb index 1783d87f3..c38e63103 100644 --- a/app/views/bubbles/_tags.html.erb +++ b/app/views/bubbles/_tags.html.erb @@ -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 %> + <%= tag.hashtag %> + <% end %> <% end %>