Adding labels to collapsed view

src/components/compress/custom-els/MultiPanel/index.ts

@@ -7,7 +7,8 @@ interface CloseAllOptions {
 const openOneOnlyAttr = 'open-one-only';
 
 function getClosestHeading(el: Element) {
-  const closestEl = el.closest('multi-panel > *');
+  // Look for the child of multi-panel, but stop at interactive elements like links & buttons
+  const closestEl = el.closest('multi-panel > *, a, button');
   if (closestEl && closestEl.classList.contains(style.panelHeading)) {
     return closestEl;
   }
@@ -66,7 +67,8 @@ export default class MultiPanel extends HTMLElement {
     // don’t handle modifier shortcuts used by assistive technology.
     if (event.altKey) return;
 
-    let newHeading:HTMLElement | undefined;
+    let newHeading: HTMLElement | undefined;
+
     switch (event.key) {
       case 'ArrowLeft':
       case 'ArrowUp':

src/components/compress/index.tsx

@@ -153,6 +153,9 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
   return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
 }
 
+// These are only used in the mobile view
+const resultTitles = ['Top', 'Bottom'];
+
 export default class Compress extends Component<Props, State> {
   widthQuery = window.matchMedia('(max-width: 599px)');
 
@@ -411,13 +414,15 @@ export default class Compress extends Component<Props, State> {
       />
     ));
 
-    const results = images.map(image => (
+    const results = images.map((image, i) => (
       <Results
         downloadUrl={image.downloadUrl}
         imageFile={image.file}
         source={source}
         loading={loading || image.loading}
-      />
+      >
+        {mobileView ? `${resultTitles[i]} (${encoderMap[image.encoderState.type].label})` : null}
+      </Results>
     ));
 
     return (

src/components/compress/style.scss

@@ -27,8 +27,10 @@
   max-width: 400px;
   margin: 0 auto;
   width: calc(100% - 60px);
+  max-height: calc(100% - 143px);
 
   @media (min-width: 600px) {
+    max-height: none;
     width: 300px;
     margin: 0;
   }

src/components/results/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, ComponentChildren, ComponentChild } from 'preact';
 
 import * as style from './style.scss';
 import FileSize from './FileSize';
@@ -12,6 +12,7 @@ interface Props {
   source?: SourceImage;
   imageFile?: Fileish;
   downloadUrl?: string;
+  children: ComponentChildren;
 }
 
 interface State {
@@ -42,10 +43,14 @@ export default class Results extends Component<Props, State> {
     }
   }
 
-  render({ source, imageFile, downloadUrl }: Props, { showLoadingState }: State) {
+  render({ source, imageFile, downloadUrl, children }: Props, { showLoadingState }: State) {
     return (
       <div class={style.results}>
         <div class={style.resultData}>
+          {(children as ComponentChild[])[0]
+            ? <div class={style.resultTitle}>{children}</div>
+            : null
+          }
           {!imageFile || showLoadingState ? 'Working…' :
             <FileSize
               blob={imageFile}

src/components/results/style.scss

@@ -25,6 +25,12 @@
   display: flex;
   align-items: center;
   padding: 0 15px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.result-title {
+  margin-right: 0.4em;
 }
 
 .size-delta {