Remember user's preference for expanding issue-info section

This shows the tag diff, and other helpful information about the detected issues.
It is expanded by default now
(closes #6408, closes #8143)

css/80_app.css

@@ -3547,6 +3547,9 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
 .issue-container:not(.active) ul.issue-fix-list {
     display: none;
 }
+.issue-container:not(.active) .issue-info {
+    display: none;
+}
 
 .issue-info {
     flex: 1 1 auto;

modules/ui/sections/entity_issues.js

@@ -1,17 +1,24 @@
 import { select as d3_select } from 'd3-selection';
 
+import { prefs } from '../../core/preferences';
 import { svgIcon } from '../../svg/icon';
 import { utilArrayIdentical } from '../../util/array';
 import { t } from '../../core/localizer';
 import { utilHighlightEntities } from '../../util';
 import { uiSection } from '../section';
 
+
 export function uiSectionEntityIssues(context) {
+    // Does the user prefer to expand the active issue?  Useful for viewing tag diff.
+    // Expand by default so first timers see it - #6408, #8143
+    var preference = prefs('entity-issues.reference.expanded');
+    var _expanded = preference === null ? true : (preference === 'true');
 
     var _entityIDs = [];
     var _issues = [];
     var _activeIssueID;
 
+
     var section = uiSection('entity-issues', context)
         .shouldDisplay(function() {
             return _issues.length > 0;
@@ -122,6 +129,8 @@ export function uiSectionEntityIssues(context) {
                 var container = d3_select(this.parentNode.parentNode.parentNode);
                 var info = container.selectAll('.issue-info');
                 var isExpanded = info.classed('expanded');
+                _expanded = !isExpanded;
+                prefs('entity-issues.reference.expanded', _expanded);  // update preference
 
                 if (isExpanded) {
                     info
@@ -151,9 +160,9 @@ export function uiSectionEntityIssues(context) {
 
         containersEnter
             .append('div')
-            .attr('class', 'issue-info')
-            .style('max-height', '0')
-            .style('opacity', '0')
+            .attr('class', 'issue-info' + (_expanded ? ' expanded' : ''))
+            .style('max-height', (_expanded ? null : '0'))
+            .style('opacity', (_expanded ? '1' : '0'))
             .each(function(d) {
                 if (typeof d.reference === 'function') {
                     d3_select(this)