avoid breaking long residue names in sequence panel

src/mol-plugin-ui/sequence/sequence.tsx

@@ -163,7 +163,7 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
     }
 
     private residue(seqIdx: number, label: string, marker: number) {
-        return <span key={seqIdx} data-seqid={seqIdx} style={{ backgroundColor: this.getBackgroundColor(marker) }} className={this.getResidueClass(seqIdx, label)}>{label}</span>;
+        return <span key={seqIdx} data-seqid={seqIdx} style={{ backgroundColor: this.getBackgroundColor(marker) }} className={this.getResidueClass(seqIdx, label)}>{label.length > 1 ? `\u200b${label}\u200b` : label}</span>;
     }
 
     private getSequenceNumberClass(seqIdx: number, seqNum: string, label: string) {

src/mol-plugin-ui/skin/base/components/sequence.scss

@@ -39,7 +39,7 @@ $sequence-select-height: 24px;
 }
 
 .msp-sequence-wrapper {
-    word-break: break-all;
+    word-break: break-word;
     // use $control-spacing for top to have space for sequence numebrs
     padding: $control-spacing $control-spacing $info-vertical-padding $control-spacing;
     user-select: none;
@@ -53,7 +53,7 @@ $sequence-select-height: 24px;
     right: 0;
 }
 
-.msp-sequence-wrapper-non-empty {    
+.msp-sequence-wrapper-non-empty {
     font-size: 85%;
     line-height: 180%;
     font-family: "Courier New", monospace;