🐞 fix: organize tecnologies pills in project section in mobile view

Author: carlosjorger

src/components/Work/Project.astro

@@ -58,13 +58,13 @@ const {
 >
 	<div
 		class:list={[imageSrc]}
-		class="lazy-background h-full overflow-hidden bg-placeholder bg-center bg-no-repeat font-lato shadow-lg shadow-black max-sm:self-center group bg-105% hover:bg-100% transition-[background-size] duration-300 ease-in-out"
+		class="lazy-background w-full aspect-auto overflow-hidden bg-placeholder bg-center bg-no-repeat font-lato shadow-lg shadow-black max-sm:self-center group bg-105% hover:bg-100% transition-[background-size] duration-300 ease-in-out"
 	>
 		<div
 			class="h-full bg-[#453662c5] p-1 backdrop-brightness-[0.4] backdrop-grayscale transition-all duration-300 ease-in-out hover:bg-teal-600/0 hover:backdrop-grayscale-0"
 		>
 			<article
-				class="m-0 flex min-h-64 w-11/12 flex-col items-start justify-between p-5 transition-[transform] duration-300 max-sm:w-full max-sm:justify-evenly max-sm:p-5 max-sm:px-4 max-sm:py-4 group-hover:scale-105 max-sm:group-hover:scale-105"
+				class="m-0 flex min-h-72 w-11/12 flex-col items-start justify-between p-5 transition-[transform] duration-300 max-sm:w-full max-sm:justify-evenly max-sm:p-4 group-hover:scale-105 max-sm:group-hover:scale-105"
 			>
 				<header
 					class="m-1 text-xl font-extrabold text-teal-200 max-sm:text-[1.65rem]"
@@ -86,17 +86,15 @@ const {
 					class:list={Astro.props.tagsClass}
 					class="flex w-full justify-between gap-2"
 				>
-					<ul class="flex flex-row gap-x-3">
+					<ul class="flex max-sm:grid max-sm:grid-cols-6 max-sm:gap-2 flex-row gap-3">
 						{
 							tags.map((tag) => (
-								<li>
-									<span
-										class="flex items-center gap-x-2 rounded-full border-2 px-2 py-1 text-base drop-shadow-[0_15px_20px_black]"
-										class:list={[tag.class]}
-									>
-										<tag.icon class="size-4" />
-										<label>{tag.name}</label>
-									</span>
+								<li
+									class="flex items-center gap-x-2 rounded-full border-2 px-2 py-1 text-base drop-shadow-[0_15px_20px_black] max-sm:col-span-2"
+									class:list={[tag.class]}
+								>
+									<tag.icon class="size-4" />
+									<label>{tag.name}</label>
 								</li>
 							))
 						}

src/components/Work/Work.astro

@@ -47,7 +47,7 @@ const TAGS = {
 	},
 	TAILWIND: {
 		name: 'Tailwindcss',
-		class: 'bg-sky-800/50 text-sky-200/80 border-sky-200/60',
+		class: 'bg-sky-800/50 text-sky-200/80 border-sky-200/60 max-sm:col-span-3',
 		icon: IconTailwind,
 	},
 	VUE: {
@@ -77,7 +77,7 @@ const TAGS = {
 	},
 	TYPESCRIPT: {
 		name: 'Typescript',
-		class: 'bg-blue-800/50 text-blue-200/80 border-blue-200/60',
+		class: 'bg-blue-800/50 text-blue-200/80 border-blue-200/60 max-sm:col-span-3',
 		icon: IconTypescript,
 	},
 };

tailwind.config.cjs

@@ -53,8 +53,8 @@ module.exports = {
 		},
 		backgroundSize: {
 			'cover': 'cover',
-			'105%': '105%',
-			'100%': '100%',
+			'105%': '105% 105%',
+			'100%': '100% 100%',
 		},
 		keyframes: {
 			'show-presentation': {