From 88e61f7f1b6ba99a7f01b4493d1ffd496deabee1 Mon Sep 17 00:00:00 2001
From: chuanlin2018 <c.lin@prometheuscomputing.com>
Date: Wed, 25 Sep 2024 11:48:07 -0400
Subject: [PATCH] Fixed wrapping issue in forefox and Safari

---
 angular/src/app/landing/keyword/keyword.component.html | 2 +-
 angular/src/app/landing/topic/topic.component.html     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/angular/src/app/landing/keyword/keyword.component.html b/angular/src/app/landing/keyword/keyword.component.html
index d3bb6ef6..216e856c 100644
--- a/angular/src/app/landing/keyword/keyword.component.html
+++ b/angular/src/app/landing/keyword/keyword.component.html
@@ -10,7 +10,7 @@
             
             <span class="editable_field ind" style="max-width: 90%;">
                 <span style="white-space: nowrap;"><strong>Keywords: </strong></span>
-                <span class="keywords" [style.background-color]="bubbleColor(keyword)" [style.border]="borderStyle(keyword)" (mouseenter)="mouseEnter(keyword)" (mouseover)="mouseEnter(keyword)" (mouseout)="mouseOut(keyword)" [style.cursor]="setCursor(keyword)" style="padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;line-height: 25px;white-space: nowrap;margin-right: 5px;" (click)="keywordClick(keyword)" *ngFor="let keyword of keywordDisplay; let i =index">
+                <span class="keywords" [style.background-color]="bubbleColor(keyword)" [style.border]="borderStyle(keyword)" (mouseenter)="mouseEnter(keyword)" (mouseover)="mouseEnter(keyword)" (mouseout)="mouseOut(keyword)" [style.cursor]="setCursor(keyword)" style="padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;line-height: 25px;margin-right: 5px;" (click)="keywordClick(keyword)" *ngFor="let keyword of keywordDisplay; let i =index">
                     <span style="display: inline-block">{{ keyword }}</span>
                 </span> 
             </span>
diff --git a/angular/src/app/landing/topic/topic.component.html b/angular/src/app/landing/topic/topic.component.html
index 03d19b69..923e7522 100644
--- a/angular/src/app/landing/topic/topic.component.html
+++ b/angular/src/app/landing/topic/topic.component.html
@@ -27,7 +27,7 @@
                                     <!-- <p-chips [(ngModel)]="topics[col]" [inputStyle]="{ display: 'none' }"></p-chips> -->
         
                                     <span style="max-width: 90%; ">
-                                        <span class="topics" [style.background-color]="bubbleColor(topic)" [style.border]="borderStyle(topic)" (mouseenter)="mouseEnter(topic)" (mouseover)="mouseEnter(topic)" (mouseout)="mouseOut(topic)" [style.cursor]="setCursor(topic)" style="padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;margin-right: 5px;line-height: 25px;white-space: nowrap;" (click)="topicClick(topic, col)" *ngFor="let topic of topicDisplay[col]; let i =index">
+                                        <span class="topics"  *ngFor="let topic of topicDisplay[col]; let i =index" [style.background-color]="bubbleColor(topic)" [style.border]="borderStyle(topic)" (mouseenter)="mouseEnter(topic)" (mouseover)="mouseEnter(topic)" (mouseout)="mouseOut(topic)" [style.cursor]="setCursor(topic)" style="padding: 0px 5px;margin: 3px;border-radius: 20px;text-align: center;margin-right: 5px;line-height: 25px;" (click)="topicClick(topic, col)">
                                             <span style="display: inline-block">{{ topic.tag }}</span>
                                         </span> 
                                     </span>