Update the title to display summary instead of id (#2137)

Prior to this change, in the vulnerability page, id of the vulnerability
was displayed as title.

This change updates the title to display the human readable summary for
the title, and adds ID as an data description.

resolves #2078

example 1 - Before:
<img width="1537" alt="before1"
src="https://github.com/google/osv.dev/assets/73332835/d4cef963-b8a4-46c6-862f-11cabbc57263">

After:
<img width="1235" alt="after1"
src="https://github.com/google/osv.dev/assets/73332835/2c3c2eef-4c28-4bac-9630-6d37d85fbbe0">



Example 2 - Before:
![Screenshot 2024-04-26 at 3 40
44 pm](https://github.com/google/osv.dev/assets/73332835/57c211d2-1bb9-4499-8729-5b051952b927)


After:
<img width="1229" alt="after2"
src="https://github.com/google/osv.dev/assets/73332835/2c17af73-4554-4fbf-816f-e8c5cc8f6802">

gcp/appengine/frontend3/src/styles.scss

@@ -639,6 +639,13 @@ dl.vulnerability-details,
     grid-column: 2;
   }
 
+  dt.summary, dd.summary {
+    margin-top: 16px;
+  }
+
+  dd.muted {
+    color: $osv-grey-600;
+  }
 
   dd.details {
     overflow-wrap: break-word;

gcp/appengine/frontend3/src/templates/vulnerability.html

@@ -62,6 +62,14 @@ <h1 class="title">{{ vulnerability.id }}</h1>
           <dd>{{ vulnerability.published }}</dd>
           <dt>Modified</dt>
           <dd>{{ vulnerability.modified }}</dd>
+          <dt class="summary">Summary</dt>
+          <dd class="summary {% if not vulnerability.summary %}muted{% endif %}">
+            {% if vulnerability.summary %}
+            {{ vulnerability.summary }}
+            {% else %}
+            [none]
+            {% endif %}
+          </dd>
           <dt>Details</dt>
           <dd class="details">
             {{ vulnerability.details|markdown|safe -}}