Semibold

web-player/src/routes/(app)/upload/+page.svelte

@@ -224,19 +224,23 @@
 				{/if}
 			</div>
 
-			<div class="grid items-start gap-6 sm:grid-cols-[auto_1fr] sm:gap-8">
-				<Field label="Portada">
+			<Surface padding="md">
+				<div class="grid items-start gap-6 md:grid-cols-[auto_1fr] md:gap-10">
+					<Field label="Portada" class="items-center md:items-start">
 						{#key coverResetToken}
 							<ImageDropzone
 								name="cover"
 								icon={ImageIcon}
 								gradient
-							size="hero"
 								onselect={() => (hasCover = true)}
 							/>
 						{/key}
+						{#snippet hint()}
+							<p>{hasCover ? 'Portada lista' : 'Haz clic para elegir'}</p>
+						{/snippet}
 					</Field>
 
+					<div class="flex min-w-0 flex-col gap-7">
 						<Field label="Título" for="title">
 							<Input
 								id="title"
@@ -250,10 +254,9 @@
 								<span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span>
 							{/snippet}
 						</Field>
-			</div>
 
 						<Field label="Géneros">
-				<div class="flex flex-wrap gap-2">
+							<div class="mb-2 flex flex-wrap gap-2">
 								{#each TRACK_GENRES as genre (genre.value)}
 									<Chip
 										selected={tags.includes(genre.value)}
@@ -268,9 +271,15 @@
 								<input type="hidden" name="tags" value={tag} />
 							{/each}
 							{#snippet hint()}
-					<p>Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.</p>
+								<p>
+									Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.
+								</p>
+								<span class="shrink-0 tabular-nums">{tags.length} elegidos</span>
 							{/snippet}
 						</Field>
+					</div>
+				</div>
+			</Surface>
 
 			<Checkbox bind:checked={acceptedTerms}>
 				Acepto los