Fix file inputs on Gallery and Versions pages not being selectable with keyboard (#4312)

Author: Prospector

apps/frontend/src/components/ui/DropArea.vue

@@ -295,11 +295,14 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ConfirmModal, injectNotificationManager } from '@modrinth/ui'
+import {
+	ConfirmModal,
+	DropArea,
+	FileInput,
+	injectNotificationManager,
+	NewModal as Modal,
+} from '@modrinth/ui'
 
-import DropArea from '~/components/ui/DropArea.vue'
-import FileInput from '~/components/ui/FileInput.vue'
-import Modal from '~/components/ui/Modal.vue'
 import { isPermission } from '~/utils/permissions.ts'
 
 const props = defineProps({
@@ -765,7 +768,6 @@ export default defineNuxtComponent({
 }
 
 .modal-gallery {
-	padding: var(--spacing-card-bg);
 	display: flex;
 	flex-direction: column;
 

apps/frontend/src/pages/[type]/[id]/gallery.vue

@@ -195,12 +195,12 @@ import {
 import {
 	ButtonStyled,
 	ConfirmModal,
+	DropArea,
 	FileInput,
 	OverflowMenu,
 	ProjectPageVersions,
 } from '@modrinth/ui'
 
-import DropArea from '~/components/ui/DropArea.vue'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 import { isPermission } from '~/utils/permissions.ts'
 import { reportVersion } from '~/utils/report-helpers.ts'

apps/frontend/src/pages/[type]/[id]/versions.vue

@@ -85,11 +85,19 @@ export default defineComponent({
 label {
 	flex-direction: unset;
 	max-height: unset;
+	&:focus-within {
+		outline: 0.25rem solid #ea80ff;
+	}
+
 	svg {
 		height: 1rem;
 	}
 	input {
-		display: none;
+		position: absolute;
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+		clip: rect(1px, 1px, 1px, 1px);
 	}
 	&.long-style {
 		display: flex;