Wrap long sponsor names to preserve the horizontal layout for the pro…

…file avatar block in the sponsor card
hasgeek · Nov 5, 2024 · c8aaedc · c8aaedc
1 parent 5001862
commit c8aaedc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/funnel/assets/sass/base/_utils.scss b/funnel/assets/sass/base/_utils.scss
@@ -38,6 +38,14 @@
   margin: auto;
 }
 
+.margin-left-auto {
+  margin-left: auto;
+}
+
+.margin-right-auto {
+  margin-right: auto;
+}
+
 .zero-padding {
   padding: 0 !important;
 }

diff --git a/funnel/templates/project_layout.html.jinja2 b/funnel/templates/project_layout.html.jinja2
@@ -323,8 +323,8 @@
               {{ faicon(icon='grip-vertical', baseline=false, css_class="margin-bottom drag-handle") }}
             {%- endif %}
           </div>
-          <div class="flex-wrapper flex-wrapper--center flex-wrapper--wrap margin-bottom">
-            {{ profileavatar(sponsorship.member, css_class='flex-item-align-end') }}
+          <div class="flex-wrapper flex-wrapper--center margin-bottom">
+            {{ profileavatar(sponsorship.member, css_class='margin-left-auto') }}
             {% if current_auth.user and current_auth.user.is_site_editor %}
               <a href="{{ sponsorship.url_for('edit') }}" rel="modal:open" aria-label="{% trans %}Edit sponsor{% endtrans %}" data-ga="Edit sponsor" data-cy="edit-sponsor" role="button" aria-haspopup="true">{{ faicon(icon='edit', baseline=false, css_class="mui--text-light mui--align-middle fa-icon--left-margin fa-icon--right-margin") }}</a>
               <a href="{{ sponsorship.url_for('remove') }}" rel="modal:open" aria-label="{% trans %}Remove sponsor{% endtrans %}" data-ga="Remove sponsor" data-cy="remove-sponsor" role="button" aria-haspopup="true">{{ faicon(icon='trash-alt', baseline=false, css_class="mui--text-light mui--align-middle") }}</a>