Tightened up how we handle whitespace and line wrapping in snippets.

vasl_templates/webapp/data/default-template-pack/ob_vo.j2

@@ -4,8 +4,8 @@
 <meta charset="utf-8">
 <style>
 {{CSS:common}}
-.note { font-size: 90% ; font-style: italic ; color: #808080 ; }
-.capability {}
+.note { font-size: 90% ; font-style: italic ; color: #808080 ; white-space: nowrap ; }
+.capability { white-space: nowrap ; }
 .capability .brewup { color: #a04010 ; }
 .comment { font-size: 96% ; font-style: italic ; color: #404040 ; white-space: nowrap ; }
 .comment .split-mg-red { color: #a04010 ; }
@@ -24,7 +24,9 @@
       border-bottom: 1px solid {{OB_COLOR_2}} ;
       padding: 2px 5px ;
       font-size: 105% ; font-weight: bold ;
+      white-space: nowrap ;
     ">
+        {# CSS "white-space:nowrap" doesn't always work in VASSAL, we need to use <nobr> and &nbsp; here :-/ #}
         <nobr>{{INCLUDE:player_flag}}{{PLAYER_NAME|nbsp}}&nbsp;{{VO_TYPES}}</nobr>
 
 {%for vo in OB_VO%}
@@ -66,8 +68,8 @@
 {%endif%}
 
         <td valign="top" style="padding:5px 5px 2px 5px;">
-            {%for cap in vo.capabilities%} <div class="capability"> {{cap|nobr}} </div> {%endfor%}
-            {%for cmnt in vo.comments%} <div class="comment"> {{cmnt|nobr}} </div> {%endfor%}
+            {%for cap in vo.capabilities%} <div class="capability"> {{cap}} </div> {%endfor%}
+            {%for cmnt in vo.comments%} <div class="comment"> {{cmnt}} </div> {%endfor%}
 
 {% if vo.capabilities_len <= MAX_CAPABILITIES and vo.image %}
 {# NOTE: If there are only a few capabilities, let the note number & notes spread full-width. #}

vasl_templates/webapp/data/default-template-pack/ob_vo.name.include

@@ -1 +1 @@
-<nobr><b>{{vo.name}}</b>&nbsp;{%if vo.elite%}&#x24ba;{%endif%}</nobr>
+<nobr><b>{{vo.name}}</b> {%if vo.elite%}&#x24ba;{%endif%}</nobr>

vasl_templates/webapp/data/default-template-pack/ob_vo.notes.include

@@ -1,6 +1,6 @@
 {%if vo.extn_id%} ❖ {%endif%}
 {%if vo.notes%}
-    {{vo.note_number}}, {{vo.notes | join(", ",true)}}
+    {{vo.note_number}}, {{vo.notes | join(", ")}}
 {%else%}
     {{vo.note_number}}
  {%endif%}

vasl_templates/webapp/static/snippets.js

@@ -432,15 +432,8 @@ function make_snippet( $btn, params, extra_params, show_date_warnings )
         snippet = func( params, {
             autoEscape: false,
             filters: {
-                join: function( snippet, sep, nbsp ) {
-                    // nb: we get better results using &nbsp; than <nobr> :shrug:
-                    var vals = [] ;
-                    for ( var i=0 ; i < snippet.length ; ++i )
-                        vals.push( nbsp ? strReplaceAll( snippet[i], " ", "&nbsp;" ) : snippet[i] ) ;
-                    return vals.join( sep ) ;
-                },
-                nobr: function( snippet ) { return "<nobr>" + snippet + "</nobr>" ; },
-                nbsp: function( snippet ) { return strReplaceAll( snippet, " ", "&nbsp;" ) ; },
+                join: function( vals, sep ) { return vals.join( sep ) ; },
+                nbsp: function( val ) { return strReplaceAll( val, " ", "&nbsp;" ) ; },
             } ,
         } ) ;
         snippet = snippet.trim() ;

vasl_templates/webapp/tests/test_comments.py

@@ -178,7 +178,7 @@ def _extract_comments( snippet ):
     """Extract comments from a snippet."""
     vals = [
         mo.group( 1 ).strip()
-        for mo in re.finditer( r'<div class="comment">\s*?<nobr>\s*?(.*?)</nobr>\s*</div>', snippet )
+        for mo in re.finditer( r'<div class="comment">(.*?)</div>', snippet )
     ]
     if not vals:
         return vals

vasl_templates/webapp/tests/test_vasl_extensions.py

@@ -291,7 +291,7 @@ def test_bfp_extensions( webapp, webdriver ):
         r'.+M3A1 Scout Car\(a\)'
         '.+<div class="note"'
         '.+&#x2756;'
-        '.+17, A, C, AllM&nbsp;34\u2020<sup>2</sup>, Jp&nbsp;A\u2020<sup>1</sup>, Ch&nbsp;F\u2020',
+        '.+17, A, C, AllM 34\u2020<sup>2</sup>, Jp A\u2020<sup>1</sup>, Ch F\u2020',
         re.DOTALL
     ) )
 
@@ -362,11 +362,11 @@ def test_bfp_extensions2( webapp, webdriver ):
         r'.+\bM5A1F\b'
         '.+<div class="note"'
         '.+&#x2756;'
-        '.+5\u2020, US&nbsp;C\u2020<sup>2</sup>, US&nbsp;F\u2020<sup>1</sup>, US&nbsp;G, US&nbsp;N, US&nbsp;Y, C'
+        '.+5\u2020, US C\u2020<sup>2</sup>, US F\u2020<sup>1</sup>, US G, US N, US Y, C'
         r'.+\bM5A1C\b'
         '.+<div class="note"'
         '.+&#x2756;'
-        '.+5\u2020, US&nbsp;C\u2020<sup>2</sup>, US&nbsp;F\u2020<sup>1</sup>, US&nbsp;G, US&nbsp;N, US&nbsp;Y, A, B',
+        '.+5\u2020, US C\u2020<sup>2</sup>, US F\u2020<sup>1</sup>, US G, US N, US Y, A, B',
         re.DOTALL
     ) )