chore: tweak empty assets message design

Author: imaginarny

src/components/Assets/AssetsEmpty.tsx

@@ -22,19 +22,19 @@ const kindsData = {
 
 export const AssetsEmpty: FC<AssetsEmptyProps> = ({ kind }) => {
     return (
-        <div className="flex flex-col items-center justify-center gap-3 w-full max-w-sm mx-auto min-h-full">
-            <div className="flex flex-col items-center justify-center gap-1">
+        <div className="flex flex-col items-center justify-center gap-3 w-full max-w-sm mx-auto pt-1 pb-4 min-h-full">
+            <div className="flex flex-col items-center justify-center gap-0.5 text-center">
                 <img
                     src={kindsData[kind].icon}
                     alt={kindsData[kind].name + " icon"}
-                    className="h-[clamp(3rem,10vh,4rem)] object-contain pixelated grayscale opacity-20"
+                    className="h-16 object-contain pixelated grayscale opacity-20"
                 >
                 </img>
 
-                <h2 className="mt-3 font-bold text-lg">
+                <h2 className="mt-0.5 font-bold text-lg">
                     No {kindsData[kind].name}, yet
                 </h2>
-                <h2>
+                <h2 className="text-sm">
                     Click plus or drag & drop to upload
                 </h2>
             </div>

src/components/Assets/AssetsList.tsx

@@ -2,6 +2,7 @@ import { type FC } from "react";
 import type { AssetKind } from "../../features/Projects/models/AssetKind";
 import { useProject } from "../../features/Projects/stores/useProject";
 import { useAssets } from "../../hooks/useAssets";
+import { cn } from "../../util/cn";
 import { AssetsEmpty } from "./AssetsEmpty";
 import type { ResourceProps } from "./AssetsItem";
 import AssetsItem from "./AssetsItem";
@@ -15,7 +16,12 @@ const AssetsList: FC<Props> = ({ kind, visibleIcon }) => {
     useProject((s) => s.project);
 
     return (
-        <ul className="inline-flex flex-wrap gap-6 content-start h-full pb-14 overflow-auto scrollbar-thin">
+        <ul
+            className={cn(
+                "inline-flex flex-wrap gap-6 content-start h-full overflow-auto scrollbar-thin",
+                { "pb-14": assets.length > 0 },
+            )}
+        >
             {assets.length > 0 && assets.map((resource, i) => (
                 <AssetsItem
                     key={i}