modules/tiles: using combination of overflow-wrap hyphens and smaller…

… fontsize to asssure proper word wrapping
liqd · May 25, 2022 · 11dbc34 · 11dbc34
1 parent e216b0d
commit 11dbc34
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/adhocracy-plus/assets/scss/components/_participation-tile.scss b/adhocracy-plus/assets/scss/components/_participation-tile.scss
@@ -39,6 +39,12 @@
 
 .participation-tile__content {
     padding: 1.5 * $padding;
+    overflow-wrap: normal;
+    hyphens: auto;
+
+    @media (min-width: $breakpoint-lg) {
+        hyphens: none;
+    }
 }
 
 .participation-tile__horizontal,

diff --git a/apps/projects/templates/a4_candy_projects/includes/project_module_tile.html b/apps/projects/templates/a4_candy_projects/includes/project_module_tile.html
@@ -5,7 +5,7 @@
     <a href="{{ module.get_absolute_url }}">
         <div class="participation-tile__type">
             <div class="participation-tile__content">
-                <h3 class="participation-tile__title">{{ module.name|truncatechars:100 }}</h3>
+                <h4 class="participation-tile__title">{{ module.name|truncatechars:100 }}</h4>
                 <span class="participation-tile__item-count">
                     <i class="fas fa-comments" aria-hidden="true"></i>
                     {% get_num_entries module as num_entries %}