add word and line break for long labels (#481)

b310-digital · Nov 13, 2024 · 8dcc71e · 8dcc71e
1 parent b1852b6
commit 8dcc71e
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 10 deletions.
diff --git a/lib/mindwendel_web/components/core_components.ex b/lib/mindwendel_web/components/core_components.ex
@@ -716,11 +716,11 @@ defmodule MindwendelWeb.CoreComponents do
 
   def filter_button(assigns) do
     ~H"""
-    <div class="m-1">
+    <div class="d-inline">
       <button
         type="button"
         class={[
-          "btn btn-sm text-light rounded-pill",
+          "btn btn-sm text-light rounded-pill m-1",
           @filter_active && "border border-2 border-primary",
           @class
         ]}

diff --git a/lib/mindwendel_web/live/brainstorming_live/show.html.heex b/lib/mindwendel_web/live/brainstorming_live/show.html.heex
@@ -94,7 +94,7 @@
       id="idea-modal"
       show
       on_cancel={JS.patch(~p"/brainstormings/#{@brainstorming.id}")}
-      title={gettext("Show idea")}
+      title={gettext("Idea details")}
     >
       <.live_component
         module={MindwendelWeb.IdeaLive.ShowComponent}

diff --git a/lib/mindwendel_web/live/idea_live/card_component.html.heex b/lib/mindwendel_web/live/idea_live/card_component.html.heex
@@ -38,7 +38,7 @@
     <%= for idea_label <- Enum.sort_by(@idea.idea_labels, &(&1.position_order)) do %>
       <span
         id={"idea-label-#{uuid()}"}
-        class="IndexComponent__IdeaLabelBadge mb-3"
+        class="IndexComponent__IdeaLabelBadge mb-3 text-wrap text-break"
         data-testid={idea_label.id}
         data-color={idea_label.color}
         phx-hook="SetIdeaLabelBackgroundColor"

diff --git a/lib/mindwendel_web/live/label_live/captions_component.html.heex b/lib/mindwendel_web/live/label_live/captions_component.html.heex
@@ -1,4 +1,4 @@
-<div class="d-flex flex-row justify-content-end">
+<div class="justify-content-end">
   <%= for brainstorming_idea_label <- @brainstorming.labels do %>
     <% filter_active = Enum.member?(@brainstorming.filter_labels_ids, brainstorming_idea_label.id) %>
     <.filter_button
@@ -14,7 +14,6 @@
   <% end %>
   <%= if has_moderating_permission(@brainstorming, @current_user) do %>
     <.filter_button
-      class="d-flex"
       label_id="filter-label-reset"
       color="grey"
       id={"idea-caption-#{uuid()}"}

diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po
@@ -386,7 +386,7 @@ msgstr "Neues Label"
 #: lib/mindwendel_web/live/admin/brainstorming_live/edit.html.heex:101
 #, elixir-autogen, elixir-format
 msgid "Choose the label color"
-msgstr ""
+msgstr "Labelfarbe wählen"
 
 #: lib/mindwendel_web/live/admin/brainstorming_live/edit.html.heex:90
 #, elixir-autogen, elixir-format, fuzzy
@@ -548,7 +548,6 @@ msgstr "Löschen"
 msgid "No comments available"
 msgstr "Keine Kommentare vorhanden"
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:97
 #: lib/mindwendel_web/live/idea_live/card_component.html.heex:33
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Show idea"
@@ -570,3 +569,8 @@ msgstr "Impressum"
 #, elixir-autogen, elixir-format
 msgid "Privacy"
 msgstr "Datenschutzerklärung"
+
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:97
+#, elixir-autogen, elixir-format
+msgid "Idea details"
+msgstr "Detailansicht"
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
@@ -547,7 +547,6 @@ msgstr ""
 msgid "No comments available"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:97
 #: lib/mindwendel_web/live/idea_live/card_component.html.heex:33
 #, elixir-autogen, elixir-format
 msgid "Show idea"
@@ -569,3 +568,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Privacy"
 msgstr ""
+
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:97
+#, elixir-autogen, elixir-format
+msgid "Idea details"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
@@ -548,7 +548,6 @@ msgstr ""
 msgid "No comments available"
 msgstr ""
 
-#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:97
 #: lib/mindwendel_web/live/idea_live/card_component.html.heex:33
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Show idea"
@@ -570,3 +569,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Privacy"
 msgstr ""
+
+#: lib/mindwendel_web/live/brainstorming_live/show.html.heex:97
+#, elixir-autogen, elixir-format
+msgid "Idea details"
+msgstr ""