From c8aaedc567c5a985866cbd5a8a5edd548344d6b6 Mon Sep 17 00:00:00 2001
From: anishTP <anish@hasgeek.com>
Date: Tue, 5 Nov 2024 17:33:28 +0530
Subject: [PATCH] Wrap long sponsor names to preserve the horizontal layout for
 the profile avatar block in the sponsor card

---
 funnel/assets/sass/base/_utils.scss         | 8 ++++++++
 funnel/templates/project_layout.html.jinja2 | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/funnel/assets/sass/base/_utils.scss b/funnel/assets/sass/base/_utils.scss
index 3de432806..fc2344d8c 100644
--- 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
index 22fa17105..543e6e44f 100644
--- 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>