JobDetails: Style preview container

* Limit preview container size to 16:9 aspect ratio.
* Use `-small` size of the last-rendered image, tiny is too small.

web/app/src/assets/base.css

@@ -497,4 +497,30 @@ span.state-transition-arrow.lazy {
   max-height: 100%;
   max-width: 100%;
 }
+
+.preview-container {
+  align-items: center;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+  display: flex;
+  height: 0;
+  justify-content: center;
+  overflow: hidden;
+  padding-top: 56.25%;
+  position: relative;
+}
+
+.preview-container div:first-child {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.preview-container img {
+  max-height: 100%;
+  max-width: 100%;
 }

web/app/src/components/jobs/JobDetails.vue

@@ -1,6 +1,9 @@
 <template>
   <template v-if="hasJobData">
-    <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-tiny" />
+    <div class="preview-container">
+      <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-small" />
+    </div>
+
     <TabsWrapper @clicked-job-details-tab="$emit('reshuffled')">
       <TabItem title="Job Settings">
         <dl v-if="hasSettings">