squash me

Author: JSReds

.npmrc

@@ -1 +1 @@
-package-lock=false
+package-lock=false

src/components/DownloadImageDialog/ImageForm.tsx

@@ -363,85 +363,90 @@ export const ImageForm = memo(function ImageForm({
 						)}
 				</Stack>
 				{!isInitialDefault && version && (
-					<Stack
-						direction="row"
-						flexWrap="wrap"
-						maxWidth="100%"
-						gap={2}
-						alignItems="center"
-					>
-						<Autocomplete
-							fullWidth
-							id="e2e-download-image-versions-list"
-							value={version}
-							getOptionLabel={(option) => option.value}
-							isOptionEqualToValue={(option, value) =>
-								option.value === value.value
-							}
-							options={versionSelectionOpts}
-							onChange={(_event, ver) => {
-								handleVersionChange(ver);
-							}}
-							placeholder="Choose a version..."
-							renderOption={(props, option) => (
-								<Box component="li" {...props}>
-									<VersionSelectItem
-										option={option}
-										isRecommended={option.value === recommendedVersion}
-									/>
-								</Box>
-							)}
-							renderInput={({ InputProps, ...params }) => (
-								<TextField
-									{...params}
-									slotProps={{
-										input: {
-											...InputProps,
-											endAdornment: (
-												<>
-													{version.value === recommendedVersion && (
-														<Chip
-															sx={{ ml: 1 }}
-															color="green"
-															label="recommended"
-														/>
-													)}
-													{!!version?.knownIssueList && (
-														<Tooltip title={version.knownIssueList}>
-															<FontAwesomeIcon
-																icon={faTriangleExclamation}
-																color={token('color.icon.warning')}
+					<>
+						<Stack
+							direction="row"
+							flexWrap="wrap"
+							maxWidth="100%"
+							gap={2}
+							alignItems="center"
+						>
+							<Autocomplete
+								fullWidth
+								id="e2e-download-image-versions-list"
+								value={version}
+								getOptionLabel={(option) => option.value}
+								isOptionEqualToValue={(option, value) =>
+									option.value === value.value
+								}
+								options={versionSelectionOpts}
+								onChange={(_event, ver) => {
+									handleVersionChange(ver);
+								}}
+								renderOption={(props, option) => (
+									<Box component="li" {...props}>
+										<VersionSelectItem
+											option={option}
+											isRecommended={option.value === recommendedVersion}
+										/>
+									</Box>
+								)}
+								renderInput={({ InputProps, ...params }) => (
+									<TextField
+										{...params}
+										slotProps={{
+											input: {
+												...InputProps,
+												endAdornment: (
+													<>
+														{version.value === recommendedVersion && (
+															<Chip
+																sx={{ ml: 1 }}
+																color="green"
+																label="recommended"
 															/>
-														</Tooltip>
-													)}
-													{InputProps.endAdornment}
-												</>
-											),
-										},
-									}}
-									label="OS version"
+														)}
+														{!!version?.knownIssueList && (
+															<Tooltip title={version.knownIssueList}>
+																<FontAwesomeIcon
+																	icon={faTriangleExclamation}
+																	color={token('color.icon.warning')}
+																/>
+															</Tooltip>
+														)}
+														{InputProps.endAdornment}
+													</>
+												),
+											},
+										}}
+										label="OS version"
+									/>
+								)}
+								disableClearable
+								sx={{ flex: 1 }}
+							/>
+							{showAllVersionsToggle && (
+								<FormControlLabel
+									control={
+										<Checkbox
+											id="e2e-show-all-versions-check"
+											checked={showAllVersions}
+											onChange={handleShowAllVersions}
+										/>
+									}
+									label="Show outdated versions"
+									// TODO: Find a better way to center the checkbox with the input only (without the label)
+									sx={{ mt: 3 }}
 								/>
 							)}
-							disableClearable
-							sx={{ flex: 1 }}
+						</Stack>
+						<Divider
+							variant="fullWidth"
+							flexItem
+							sx={{ borderStyle: 'dashed' }}
 						/>
-						{showAllVersionsToggle && (
-							<FormControlLabel
-								control={
-									<Checkbox
-										id="e2e-show-all-versions-check"
-										checked={showAllVersions}
-										onChange={handleShowAllVersions}
-									/>
-								}
-								label="Show outdated versions"
-								// TODO: Find a better way to center the checkbox with the input only (without the label)
-								sx={{ mt: 3 }}
-							/>
-						)}
-					</Stack>
+					</>
 				)}
-				<Divider variant="fullWidth" flexItem sx={{ borderStyle: 'dashed' }} />
 				{(!isInitialDefault || !variant) && (
 					<VariantSelector
 						version={version}