Add scrollbar in Matches tab (#41)

Move the preview image up.

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.6.6
+
+- Add a scrollbar to the right panel of the Matches tab.
+
 ## v0.6.5
 
 - Fix the MatchImageUi component displaying the wrong image when there is no

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codec_compare",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Codec performance comparison tool",
   "publisher": "Google LLC",
   "author": "Yannis Guyon",

src/codec_compare.ts

@@ -252,7 +252,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare version 0.6.5<br>
+            Codec Compare version 0.6.6<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>

src/match_image_ui.ts

@@ -97,6 +97,7 @@ export class MatchImageUi extends LitElement {
       overflow: hidden;
       display: flex;
       justify-content: center;
+      min-height: 100px;
     }
     a {
       box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 6px 0px;

src/matches_ui.ts

@@ -80,6 +80,10 @@ export class MatchesUi extends LitElement {
 
       <div class="rightVerticalFlex"
         style=${this.matchIndex !== undefined ? '' : 'display: none'}>
+        <match-image-ui .referenceSelection=${this.referenceSelection}
+          .batchSelection=${this.batchSelection}
+          .matchIndex=${this.matchIndex}>
+        </match-image-ui>
         <constants-table-ui
           .batch=${this.batchSelection.batch}
           .rowIndex=${rowIndex}>
@@ -94,10 +98,6 @@ export class MatchesUi extends LitElement {
             <mwc-icon>open_in_new</mwc-icon>
           </mwc-button>
         </a>`}
-        <match-image-ui .referenceSelection=${this.referenceSelection}
-          .batchSelection=${this.batchSelection}
-          .matchIndex=${this.matchIndex}>
-        </match-image-ui>
       </div>`;
   }
 
@@ -115,16 +115,17 @@ export class MatchesUi extends LitElement {
       flex-direction: column;
       justify-content: flex-start;
       gap: 10px;
-      overflow: hidden;
     }
     .leftVerticalFlex {
       flex: 4;
       /* Prevents unnecessarily wide table but breaks scrollbars. */
       /* align-items: flex-start; */
+      overflow: hidden;
     }
     .rightVerticalFlex {
       flex: 1;
       align-items: center;
+      overflow: auto;
     }
 
     #batchesHeader {