From 7693954fbe11a9b4ffbb1db72964ca484afcd728 Mon Sep 17 00:00:00 2001
From: sab-LC <145371882+sab-LC@users.noreply.github.com>
Date: Wed, 13 Nov 2024 05:23:16 -0800
Subject: [PATCH] Corrected UI bug (#402)

---
 templates/communities/apply-labels.html | 87 ++++++++++++-------------
 1 file changed, 43 insertions(+), 44 deletions(-)

diff --git a/templates/communities/apply-labels.html b/templates/communities/apply-labels.html
index 3fdc61f3..05a7846d 100644
--- a/templates/communities/apply-labels.html
+++ b/templates/communities/apply-labels.html
@@ -4,11 +4,53 @@
     <div class="padding-bottom-2"><small><a href="{% url 'community-projects' community.id %}"><span class="darkteal-text">Projects</span></a> >> Apply Labels</small></div>
     <div class="flex-this space-between">
 
-        <div class="w-60 flex-this column">
+        <div class="flex-this column">
             <div>
                 <h2 class="mb-0 mt-0">Apply Labels</h2>
                 <p>Please choose from your customized Labels below. Select a Label to see description.</p>
             </div>
+            
+            <div class="flex-this row align-right wrap">
+
+                <div class="flex-this row mt-8 wrap">
+                    {% if project.tk_labels.all or project.bc_labels.all %}
+                        {% if project.tk_labels.all %}
+                            {% for tklabel in project.tk_labels.all %}
+                                <div class="ml-8 mb-8">
+                                    {% include 'tklabels/tiny-labels.html' %}
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+    
+                        {% if project.bc_labels.all %}
+                            {% for bclabel in project.bc_labels.all %}
+                                <div class="ml-8 mb-8">
+                                    {% include 'bclabels/tiny-labels.html' %}
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+                    {% else %}
+                        <div class="flex-this flex-end w-60">
+                            {% if project.project_notice.all %}
+                                {% for notice in project.project_notice.all %}
+                                    {% if not notice.archived %}
+                                        {% if notice.notice_type == 'biocultural' %}
+                                            <div class="ml-8 mb-8"><img loading="lazy" class="pointer-event-none" src="{% static 'images/notices/bc-notice.png' %}" width="62px" alt="BC Notice icon. Black background with the top right corner folded and the letters “BC” in white in center."></div>
+                                        {% endif %}
+                                        {% if notice.notice_type == 'traditional_knowledge' %}
+                                            <div class="ml-8 mb-8"><img loading="lazy" class="pointer-event-none" src="{% static 'images/notices/tk-notice.png' %}" width="62px" alt="TK Notice icon. Black background with the top right corner folded and the letters “TK” in white in center."></div>
+                                        {% endif %}
+                                        {% if notice.notice_type == 'attribution_incomplete' %}
+                                            <div class="ml-8 mb-8"><img loading="lazy" class="pointer-event-none" src="{% static 'images/notices/ci-attribution-incomplete.png' %}" width="62px" alt="Attribution Incomplete Notice icon. Black square with the top right corner folded and a white square in center with left side in solid line and right side in dotted line."></div>
+                                        {% endif %}
+                                    {% endif %}
+                                {% endfor %}
+                            {% endif %}
+                        </div>
+                    {% endif %}
+    
+                </div>
+            </div>
 
             <div>
                 <h2 class="mb-0 mt-0">
@@ -46,49 +88,6 @@ <h2 class="mb-0 mt-0">
             {% endif %}
         </div>
 
-        <div class="w-40 flex-this column align-right mt-16">
-
-            <div class="flex-this row mt-8 w-50 flex-end">
-                {% if project.tk_labels.all or project.bc_labels.all %}
-                    {% if project.tk_labels.all %}
-                        {% for tklabel in project.tk_labels.all %}
-                            <div class="ml-8">
-                                {% include 'tklabels/tiny-labels.html' %}
-                            </div>
-                        {% endfor %}
-                    {% endif %}
-
-                    {% if project.bc_labels.all %}
-                        {% for bclabel in project.bc_labels.all %}
-                            <div class="ml-8">
-                                {% include 'bclabels/tiny-labels.html' %}
-                            </div>
-                        {% endfor %}
-                    {% endif %}
-                {% else %}
-                    <div class="flex-this flex-end w-60">
-                        {% if project.project_notice.all %}
-                            {% for notice in project.project_notice.all %}
-                                {% if not notice.archived %}
-                                    {% if notice.notice_type == 'biocultural' %}
-                                        <div class="ml-8"><img loading="lazy" class="pointer-event-none" src="{% static 'images/notices/bc-notice.png' %}" width="62px" alt="BC Notice icon. Black background with the top right corner folded and the letters “BC” in white in center."></div>
-                                    {% endif %}
-                                    {% if notice.notice_type == 'traditional_knowledge' %}
-                                        <div class="ml-8"><img loading="lazy" class="pointer-event-none" src="{% static 'images/notices/tk-notice.png' %}" width="62px" alt="TK Notice icon. Black background with the top right corner folded and the letters “TK” in white in center."></div>
-                                    {% endif %}
-                                    {% if notice.notice_type == 'attribution_incomplete' %}
-                                        <div class="ml-8"><img loading="lazy" class="pointer-event-none" src="{% static 'images/notices/ci-attribution-incomplete.png' %}" width="62px" alt="Attribution Incomplete Notice icon. Black square with the top right corner folded and a white square in center with left side in solid line and right side in dotted line."></div>
-                                    {% endif %}
-                                {% endif %}
-                            {% endfor %}
-                        {% endif %}
-                    </div>
-                {% endif %}
-
-            </div>
-
-        </div>
-
     </div>
 </div>