lint

Author: aggre

example/Checkout.astro

@@ -27,7 +27,7 @@ const payload = toUtf8Bytes('tier-1')
 	>
 		<span
 			slot="checkout:preview"
-			class="h-auto min-h-24 w-24 rounded-lg border border-black/20 bg-black/10 p-1"
+			class="min-h-24 h-auto w-24 rounded-lg border border-black/20 bg-black/10 p-1"
 		>
 			<img
 				v-if="previewImageSrc"
@@ -37,7 +37,7 @@ const payload = toUtf8Bytes('tier-1')
 		</span>
 		<img
 			slot="checkout:result:preview"
-			class="z-10 max-h-60 min-h-full max-w-60 rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
+			class="max-w-60 z-10 max-h-60 min-h-full rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
 			src="https://images.unsplash.com/photo-1688168293343-e1c824a4ace5?q=80&w=1200&h=1200&fit=crop"
 		/>
 		<div class="opacity-50" slot="checkout:after:description">

src/layouts/Admin.astro

@@ -206,7 +206,7 @@ const SlotsSidebarAfterFooter = clubs.slots.filter(
 			</main>
 			{
 				showAside && (
-					<div class="container mx-auto max-w-96 px-2 py-8 lg:px-0 lg:py-16">
+					<div class="max-w-96 container mx-auto px-2 py-8 lg:px-0 lg:py-16">
 						<Aside showConnectButton={true}>
 							<slot name="clubs:connect-button" slot="aside:connect-button">
 								<ConnectButton client:load chainId={config.chainId} />

src/ui/components/Checkout/Checkout.vue

@@ -596,7 +596,7 @@ onUnmounted(() => {
 						<span class="peer contents">
 							<slot name="preview" />
 						</span>
-						<span class="contents peer-has-[:not(:empty)]:hidden">
+						<span class="peer-has-[:not(:empty)]:hidden contents">
 							<span
 								v-if="!previewImageSrc && previewVideoSrc"
 								class="w-36 rounded-lg border border-black/20 bg-black/10 p-1"
@@ -609,7 +609,7 @@ onUnmounted(() => {
 
 							<span
 								v-if="!previewVideoSrc"
-								class="h-auto min-h-24 w-24 rounded-lg border border-black/20 bg-black/10 p-1"
+								class="min-h-24 h-auto w-24 rounded-lg border border-black/20 bg-black/10 p-1"
 							>
 								<img
 									v-if="previewImageSrc"
@@ -660,7 +660,7 @@ onUnmounted(() => {
 						v-if="account === undefined"
 						class="absolute -left-2 @xs/clb_checkout_signin_button:left-5"
 					/>
-					<IconSpinner v-else class="absolute left-5 size-5" />
+					<IconSpinner v-else class="size-5 absolute left-5" />
 					<span class="font-bold">{{ i18n('SignIn') }}</span>
 				</button>
 				<a
@@ -673,7 +673,7 @@ onUnmounted(() => {
 					<div class="flex items-center justify-start gap-2">
 						<img
 							:src="clubsProfile.avatar"
-							class="aspect-square size-8 overflow-hidden rounded-full border border-black/20 object-cover"
+							class="size-8 aspect-square overflow-hidden rounded-full border border-black/20 object-cover"
 						/>
 						<span class="text-sm font-bold">{{ clubsProfile.username }}</span>
 					</div>
@@ -779,11 +779,11 @@ onUnmounted(() => {
 								approveNeeded &&
 								(isApproving || isFetchingApproval === 'progress')
 							"
-							class="absolute left-5 size-5"
+							class="size-5 absolute left-5"
 						/>
 						<IconCheckCircle
 							v-if="approveNeeded === false"
-							class="absolute left-5 size-5 text-dp-green-300"
+							class="size-5 absolute left-5 text-dp-green-300"
 							type="solid"
 						/>
 						<IconBouncingArrowRight
@@ -830,7 +830,7 @@ onUnmounted(() => {
 						>
 							<IconSpinner
 								v-if="isStaking || isFetchingFunds === 'progress'"
-								class="absolute left-5 size-5"
+								class="size-5 absolute left-5"
 							/>
 							<IconBouncingArrowRight
 								class="absolute -left-2 group-disabled:hidden @xs/clb_checkout_pay_button:left-5"

src/ui/components/Checkout/ModalCheckout.vue

@@ -171,7 +171,7 @@ onMounted(async () => {
 		</a>
 
 		<div
-			class="bg-color-navy relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
+			class="bg-color-navy min-h-52 relative mb-6 flex h-auto w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
 		>
 			<div
 				class="w-h-screen bg-focus-lines origin-zero animate-spin-slow mask absolute inset-2/4 bg-center bg-no-repeat"
@@ -190,16 +190,16 @@ onMounted(async () => {
 				<span class="peer contents">
 					<slot name="preview" />
 				</span>
-				<span class="contents peer-has-[:not(:empty)]:hidden">
+				<span class="peer-has-[:not(:empty)]:hidden contents">
 					<img
 						v-if="imageSrc"
 						ref="imageRef"
-						class="z-10 max-h-60 min-h-full max-w-60 rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
+						class="max-w-60 z-10 max-h-60 min-h-full rounded-md object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
 					/>
 					<!-- video -->
 					<VideoFetch
 						v-if="!imageSrc && videoSrc"
-						class="aspect-[1/1] max-w-60 rounded-md"
+						class="max-w-60 aspect-[1/1] rounded-md"
 						video-class="rounded-md [&>video]:rounded-md"
 						:url="videoSrc"
 					/>

src/ui/svelte/IconBouncingArrowRight.svelte

@@ -26,7 +26,7 @@
 			 ${typeof className === 'string' ? className : ''}
 			 `}
 >
-	<IconArrowRight class="aspect-square size-full text-white" />
+	<IconArrowRight class="size-full aspect-square text-white" />
 </span>
 
 <style>

src/ui/svelte/VideoFetch.svelte

@@ -98,7 +98,7 @@
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
-			class="absolute inset-0 m-auto flex size-1/2 items-center justify-center text-white opacity-60"
+			class="size-1/2 absolute inset-0 m-auto flex items-center justify-center text-white opacity-60"
 			on:click|stopPropagation|preventDefault={togglePlay}
 		>
 			<!-- Play icon -->

src/ui/vue/IconBouncingArrowRight.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
 				: undefined),
 		}"
 	>
-		<IconArrowRight class="aspect-square size-full text-white" />
+		<IconArrowRight class="size-full aspect-square text-white" />
 	</span>
 </template>
 

src/ui/vue/VideoFetch.vue

@@ -122,7 +122,7 @@ onMounted(async () => {
 		<!-- Custom play/pause overlay (only if isControlled=true) -->
 		<div
 			v-if="isControlled"
-			class="absolute inset-0 m-auto flex size-1/2 items-center justify-center text-white opacity-60"
+			class="size-1/2 absolute inset-0 m-auto flex items-center justify-center text-white opacity-60"
 			@click.stop.prevent="togglePlay"
 		>
 			<!-- Play icon -->