overset residue numbers in sequence ui

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

@@ -13,13 +13,14 @@
 }
 
 .msp-sequence-wrapper {
-    word-break: break-word;
+    word-break: break-all;
     padding: $info-vertical-padding $control-spacing $info-vertical-padding $control-spacing;
     user-select: none;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     font-size: 90%;
+    line-height: 180%;
 }
 
 .msp-sequence-wrapper-non-empty {
@@ -33,10 +34,13 @@
 
     .msp-sequence-marker {
         color: $sequence-marker-color;
-        // vertical-align: middle;
-        text-decoration: underline;
-        padding: 0 0 0 1ch;
         word-break: keep-all;
         cursor: default;
+        position: relative;
+        top: -1.1em;
+        left: 3em;
+        padding: 0px;
+        margin-left: -3em;
+        font-size: 80%;
     }
 }

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

@@ -160,14 +160,17 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
         for (let i = 0, il = sw.length; i < il; ++i) {
             elems[elems.length] = this.residue(i, sw.residueLabel(i), sw.markerArray[i], sw.residueColor(i));
             if (markers && i > 0 && i % SequenceMarkerPeriod === 0) {
-                if (i === sw.length - 1) break;
+                if (i === sw.length - (1 + 5)) break;
                 // TODO: is this correct way to show the offset?
                 const l = StructureElement.Loci.getFirstLocation(sw.getLoci(i + 1), location);
                 if (l) {
-                    elems[elems.length] = <span key={`marker-${i}`} className='msp-sequence-marker'>{StructureProperties.residue.auth_seq_id(l)}</span>
+                    const seqId = StructureProperties.residue.auth_seq_id(l)
+                    const insCode = StructureProperties.residue.pdbx_PDB_ins_code(l)
+                    const label = `${seqId}${insCode ? insCode : ''}`
+                    elems[elems.length] = <span key={`marker-${i}`} className='msp-sequence-marker'>{label.padEnd(5, '\u00A0')}</span>
                 } else {
-                    // do not show the marker if the seq id is not known.
-                    elems[elems.length] = <span key={`marker-${i}`} className='msp-sequence-marker'></span>
+                    // show empty marker if the seq id is not known.
+                    elems[elems.length] = <span key={`marker-${i}`} className='msp-sequence-marker'>{'\u00A0'.repeat(5)}</span>
                 }
             }
         }