fix(gui): prevent dropdown border from overlapping with label

gui/src/components/OnnxWeb.tsx

@@ -40,12 +40,22 @@ export function OnnxWeb(props: OnnxWebProps) {
         </Box>
         <Box sx={{ my: 4 }}>
           <Stack direction='row' spacing={2}>
-            <QueryList result={models} labels={MODEL_LABELS} value={model} name='Model'
+            <QueryList
+              id='models'
+              labels={MODEL_LABELS}
+              name='Model'
+              result={models}
+              value={model}
               onChange={(value) => {
                 setModel(value);
               }}
             />
-            <QueryList result={platforms} labels={PLATFORM_LABELS} value={platform} name='Platform'
+            <QueryList
+              id='platforms'
+              labels={PLATFORM_LABELS}
+              name='Platform'
+              result={platforms}
+              value={platform}
               onChange={(value) => {
                 setPlatform(value);
               }}

gui/src/components/QueryList.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { UseQueryResult } from 'react-query';
 
 export interface QueryListProps {
+  id: string;
   labels: Record<string, string>;
   name: string;
   result: UseQueryResult<Array<string>>;
@@ -32,14 +33,20 @@ export function QueryList(props: QueryListProps) {
   }
 
   // else: success
+  const labelID = `query-list-${props.id}-labels`;
   const data = mustExist(result.data);
   return <FormControl>
-    <InputLabel>{props.name}</InputLabel>
-    <Select value={value} onChange={(e) => {
-      if (doesExist(props.onChange)) {
-        props.onChange(e.target.value);
-      }
-    }}>
+    <InputLabel id={labelID}>{props.name}</InputLabel>
+    <Select
+      labelId={labelID}
+      label={props.name}
+      value={value}
+      onChange={(e) => {
+        if (doesExist(props.onChange)) {
+          props.onChange(e.target.value);
+        }
+      }}
+    >
       {data.map((name) => <MenuItem key={name} value={name}>{mustDefault(labels[name], name)}</MenuItem>)}
     </Select>
   </FormControl>;

gui/src/components/Txt2Img.tsx

@@ -51,7 +51,12 @@ export function Txt2Img(props: Txt2ImgProps) {
   return <Box>
     <Stack spacing={2}>
       <Stack direction='row' spacing={2}>
-        <QueryList result={schedulers} value={scheduler} labels={SCHEDULER_LABELS} name='Scheduler'
+        <QueryList
+          id='schedulers'
+          labels={SCHEDULER_LABELS}
+          name='Scheduler'
+          result={schedulers}
+          value={scheduler}
           onChange={(value) => {
             setScheduler(value);
           }}