Download button on the outside.

src/components/compress/index.tsx

@@ -156,6 +156,9 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
 
 // These are only used in the mobile view
 const resultTitles = ['Top', 'Bottom'];
+// These are only used in the desktop view
+const buttonPositions =
+  ['download-left', 'download-right'] as ('download-left' | 'download-right')[];
 
 export default class Compress extends Component<Props, State> {
   widthQuery = window.matchMedia('(max-width: 599px)');
@@ -424,6 +427,7 @@ export default class Compress extends Component<Props, State> {
         loading={loading || image.loading}
         copyDirection={copyDirections[index]}
         onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
+        buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
       >
         {!mobileView ? null : [
           <ExpandIcon class={style.expandIcon} key="expand-icon"/>,

src/components/results/index.tsx

@@ -6,6 +6,7 @@ import { DownloadIcon, CopyAcrossIcon, CopyAcrossIconProps } from '../../lib/ico
 import '../custom-els/LoadingSpinner';
 import { SourceImage } from '../compress';
 import { Fileish, bind } from '../../lib/initial-util';
+import { button } from '../output/style.scss.d';
 
 interface Props {
   loading: boolean;
@@ -14,6 +15,7 @@ interface Props {
   downloadUrl?: string;
   children: ComponentChildren;
   copyDirection: CopyAcrossIconProps['copyDirection'];
+  buttonPosition: keyof typeof buttonPositionClass;
   onCopyToOtherClick(): void;
 }
 
@@ -21,6 +23,12 @@ interface State {
   showLoadingState: boolean;
 }
 
+const buttonPositionClass = {
+  'stack-right': style.stackRight,
+  'download-right': style.downloadRight,
+  'download-left': style.downloadLeft,
+};
+
 const loadingReactionDelay = 500;
 
 export default class Results extends Component<Props, State> {
@@ -52,11 +60,12 @@ export default class Results extends Component<Props, State> {
   }
 
   render(
-    { source, imageFile, downloadUrl, children, copyDirection }: Props,
+    { source, imageFile, downloadUrl, children, copyDirection, buttonPosition }: Props,
     { showLoadingState }: State,
   ) {
+
     return (
-      <div class={style.results}>
+      <div class={`${style.results} ${buttonPositionClass[buttonPosition]}`}>
         <div class={style.resultData}>
           {(children as ComponentChild[])[0]
             ? <div class={style.resultTitle}>{children}</div>

src/components/results/style.scss

@@ -16,7 +16,7 @@
 
 .results {
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: [text] 1fr [copy-button] auto [download-button] auto;
   background: rgba(0, 0, 0, 0.9);
   font-size: 1rem;
 
@@ -34,13 +34,29 @@
 }
 
 .result-data {
+  grid-row: 1;
+  grid-column: text;
   display: flex;
   align-items: center;
-  padding: 0 15px;
+  padding: 0 10px;
   white-space: nowrap;
   overflow: hidden;
 }
 
+.download-right {
+  grid-template-columns: [copy-button] auto [text] 1fr [download-button] auto;
+}
+
+.download-left {
+  grid-template-columns: [download-button] auto [text] 1fr [copy-button] auto;
+}
+
+.stack-right {
+  & .result-data {
+    padding: 0 15px;
+  }
+}
+
 .result-title {
   display: flex;
   align-items: center;
@@ -64,6 +80,8 @@
 }
 
 .download {
+  grid-row: 1;
+  grid-column: download-button;
   background: #34B9EB;
   --size: 38px;
   width: var(--size);
@@ -104,6 +122,8 @@
 }
 
 .copy-to-other {
+  grid-row: 1;
+  grid-column: copy-button;
   composes: unbutton from '../../lib/util.scss';
   composes: download;