add titles and other edit fixes

app/static/css/partials/_ascroll.scss

@@ -1,6 +1,8 @@
 #ascroll {
   font-family: "Noton Sans";
-  width: 100vw;
+  width: 100%;
+  max-width: 1080px;
+  margin: auto;
 
   h1 {
     margin: 4px;
@@ -13,17 +15,24 @@
   .player {
     position: absolute;
     display: none;
-    width: 100vw;
+    width: 100%;
     height: auto;
+    max-width: 1080px;
+    margin: auto;
     //transition: opacity 0.4s;
 
   }
   .annotation {
     .frame {
       img {
-        width: 100vw;
+        width: 100%;
         height: auto;
       }
+      figcaption {
+        text-align: right;
+        padding-right: 4px;
+        font-size: 14px;
+      }
     }
     .text {
       margin: 20px 20px;

app/static/js/ascroll.js

@@ -156,7 +156,13 @@ function loadEdit(config) {
                 var div = document.createElement('div')
                 div.classList.add('annotation')
                 div.innerHTML = `
-                    <div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
+                    <div class="frame">
+                        <figure>
+                            <img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
+                            <figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${clip.title}</a></figcaption>
+                        </figure>
+
+                    </div>
                     <div class="text">${annotation.value}</div>
 
                 `
@@ -173,7 +179,7 @@ function loadEdit(config) {
         loaded = true
         let frame = ascroll.querySelector('.annotation .frame')
         if (frame) {
-            var src = `${baseURL}/${ifrst.id.split('/')[0]}/480p.webm`
+            var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
             updatePlayer(video, frame, first['in'], src)
         }