publication viewer tags and styling

Website/index.html

@@ -61,6 +61,7 @@
           <img id="pubviewcover" src="media/cover.jpg" alt="cover">
           <publication-information>
             <publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
+            <publication-tags id="publicationViewerTags"></publication-tags>
             <publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
             <publication-description id="publicationViewerDescription">Imamura Hinata is a high school boy with a cute appearance.
               Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different…

Website/interaction.js

@@ -14,6 +14,7 @@ const publicationViewerPopup = document.querySelector("#publicationViewerPopup")
 const publicationViewerWindow = document.querySelector("publication-viewer");
 const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
 const publicationViewerName = document.querySelector("#publicationViewerName");
+const publicationViewerTags = document.querySelector("#publicationViewerTags");
 const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
 const pubviewcover = document.querySelector("#pubviewcover");
 const publicationDelete = document.querySelector("publication-delete");
@@ -169,6 +170,7 @@ function ShowPublicationViewerWindow(publicationId, event, add){
     //Edit information inside the window
     var publication = publications.filter(pub => pub.internalId === publicationId)[0];
     publicationViewerName.innerText = publication.sortName;
+    publicationViewerTags.innerText = publication.tags.join(", ");
     publicationViewerDescription.innerText = publication.description;
     publicationViewerAuthor.innerText = publication.author;
     pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`;
@@ -296,7 +298,6 @@ function ShowQueuedTasks(event){
             }
         });
 }
-
 function ShowAllTasks(event){
     GetDownloadTasks()
         .then(json => {

Website/style.css

@@ -376,14 +376,13 @@ addtask-settings addtask-setting{
 publication-viewer{
     display: block;
     width: 450px;
-    height: 300px;
     position: absolute;
     top: 200px;
     left: 400px;
     background-color: var(--accent-color);
     border-radius: 5px;
     overflow: hidden;
-    padding: 30px;
+    padding: 15px;
 }
 
 publication-viewer::after{
@@ -391,7 +390,8 @@ publication-viewer::after{
     position: absolute;
     left: 0; top: 0;
     border-radius: 5px;
-    width: 100%; height: 100%;
+    width: 100%;
+    height: 100%;
     background: rgba(0,0,0,0.8);
     backdrop-filter: blur(3px);
 }
@@ -407,16 +407,32 @@ publication-viewer img {
     z-index: 0;
 }
 
-publication-viewer publication-information publication-name{
+publication-viewer publication-information > * {
     margin: 5px 0;
 }
 
-publication-viewer publication-information publication-author {
-    margin: 5px 0;
+publication-viewer publication-information publication-name {
+    width: initial;
+    overflow-x: scroll;
+    white-space: nowrap;
+    scrollbar-width: none;
+}
+
+publication-viewer publication-information publication-tags::before {
+    content: "Tags";
+    display: block;
+    font-weight: bolder;
+}
+
+publication-viewer publication-information publication-tags {
+    overflow-x: scroll;
+    white-space: nowrap;
+    scrollbar-width: none;
 }
 
 publication-viewer publication-information publication-author::before {
     content: "Author: ";
+    font-weight: bolder;
 }
 
 publication-viewer publication-information publication-description::before {
@@ -428,23 +444,20 @@ publication-viewer publication-information publication-description::before {
 publication-viewer publication-information publication-description {
     font-size: 12pt;
     margin: 5px 0;
-    max-height: 200px;
+    height: 145px;
     overflow-x: scroll;
 }
 
 publication-viewer publication-information publication-interactions {
     display: flex;
     flex-direction: row;
-    position: absolute;
     justify-content: end;
     align-items: start;
-    bottom: 0;
-    left: 0;
     width: 100%;
 }
 
 publication-viewer publication-information publication-interactions > * {
-    margin: 0 10px 10px 10px;
+    margin: 0 10px;
     font-size: 16pt;
 }