toolbar: make buttons scale with screen size

This is very basic, just 2 sizes. But it makes things a bit better
on phones.

Fixes: https://github.com/pybricks/support/issues/300

src/toolbar/OpenFileButton.tsx

@@ -4,12 +4,14 @@
 import { Button, IRef, Intent, Spinner, SpinnerSize } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { tooltipDelay } from '../app/constants';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
+const smallScreenThreshold = 700;
+
 export interface OpenFileButtonProps {
     /** A unique id for each instance. */
     readonly id: string;
@@ -43,6 +45,20 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
         fallback: en,
     });
 
+    const [isSmallScreen, setIsSmallScreen] = useState(
+        window.innerWidth <= smallScreenThreshold,
+    );
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsSmallScreen(window.innerWidth <= smallScreenThreshold);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    });
+
+    const buttonSize = isSmallScreen ? SpinnerSize.SMALL : SpinnerSize.STANDARD;
+
     const { getRootProps, getInputProps } = useDropzone({
         accept: props.fileExtension,
         multiple: false,
@@ -113,11 +129,15 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                 >
                     <input {...getInputProps()} />
                     {props.showProgress ? (
-                        <Spinner value={props.progress} intent={Intent.PRIMARY} />
+                        <Spinner
+                            value={props.progress}
+                            intent={Intent.PRIMARY}
+                            size={buttonSize}
+                        />
                     ) : (
                         <img
-                            width={`${SpinnerSize.STANDARD}px`}
-                            height={`${SpinnerSize.STANDARD}px`}
+                            width={`${buttonSize}px`}
+                            height={`${buttonSize}px`}
                             src={props.icon}
                             alt={props.id}
                             style={{ pointerEvents: 'none' }}