Emotion images render on ratings page and rating box is always 100% of screen width

src/lib/Feature/Feature.svelte

@@ -1,59 +1,53 @@
 <script>
 	import { urlFor } from '$lib/sanityClient';
 	import { currentProduct } from '$lib/stores';
-import Rating from './Rating/Rating.svelte';
+	import Rating from './Rating/Rating.svelte';
 	import Tag from './Tag/Tag.svelte';
-	console.log($currentProduct);
 
 	const { container, imageView, name, description, productInfo, date, tags, img, ratings } = {
 		container: 'flex flex-col',
-		imageView: 'flex m-16 gap-12',
+		imageView: 'flex m-16 gap-12 w-100',
 		productInfo: 'flex flex-col gap-2',
 		name: 'font-bold text-2xl',
 		description: '',
 		date: 'text-xs w-2/3 mt-auto mb-4',
 		tags: 'flex gap-1',
 		img: 'p-8 border w-72 h-72 min-w-36 min-h-36  border-black border-2 p-3',
-		ratings: ''
-	}
+		ratings: 'w-100'
+	};
 </script>
 
 <div class={container}>
-<div class={imageView}>
-	{#if $currentProduct.image}
-		<img
-			src={urlFor($currentProduct.image).url()}
-			class={img}
-			alt={$currentProduct.name}
-		/>
-	{/if}
-	<div class={productInfo}>
-		<p class={name}>{$currentProduct.name}</p>
-		{#if $currentProduct.tags}
-			<div class={tags}>
-				{#each $currentProduct.tags as tag (tag._ref)}
-					<Tag {tag} />
-				{/each}
-			</div>
+	<div class={imageView}>
+		{#if $currentProduct.image}
+			<img src={urlFor($currentProduct.image).url()} class={img} alt={$currentProduct.name} />
 		{/if}
-		{#if $currentProduct.description}
-			<p class={description}>{$currentProduct.description}</p>
-		{/if}
-		<p class={date}>Created on: {new Date($currentProduct._createdAt)}</p>
+		<div class={productInfo}>
+			<p class={name}>{$currentProduct.name}</p>
+			{#if $currentProduct.tags}
+				<div class={tags}>
+					{#each $currentProduct.tags as tag (tag._ref)}
+						<Tag {tag} />
+					{/each}
+				</div>
+			{/if}
+			{#if $currentProduct.description}
+				<p class={description}>{$currentProduct.description}</p>
+			{/if}
+			<p class={date}>Created on: {new Date($currentProduct._createdAt)}</p>
+		</div>
 	</div>
-
-</div>
 	{#if $currentProduct.rating}
-	<div class={ratings}>
-		{#each $currentProduct.rating as rating (rating._key)}
-		<Rating {rating}/>
-		{/each}
-	</div>
-{/if}
+		<div class={ratings}>
+			{#each $currentProduct.rating as rating (rating._key)}
+				<Rating {rating} />
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
 	img {
 		image-rendering: pixelated;
 	}
-</style>
+</style>

src/lib/Feature/Rating/Rating.svelte

@@ -1,10 +1,11 @@
 <script>
+	import { urlFor } from '../../sanityClient';
 	export let rating;
 	import { emotions } from '$lib/stores';
 	let foundEmotion;
 
 	if (rating.emotion) {
-		foundEmotion = $emotions.find((emotion) => emotion._id === rating.emotion._ref).name;
+		foundEmotion = $emotions.find((emotion) => emotion._id === rating.emotion._ref);
 	}
 
 	let stars = [];
@@ -13,22 +14,24 @@
 		stars.push('⭐');
 	}
 
-	const { container, emotion, details, name, comments, ratingStars, spacer } = {
-		container: 'border border-1 border-black h-full min-h-36 m-16 mt-0 mb-4 flex ',
-		emotion: 'w-56 flex-shrink-0 bg-gray-100 flex flex-col items-center p-2 justify-between h-100',
+	const { container, emotion, emotionName, details, name, comments, ratingStars, spacer, img } = {
+		container: 'border border-1 border-black h-full min-h-36 m-16 mt-0 mb-4 flex w-100',
+		emotion: 'w-56 flex-shrink-0 bg-gray-100 flex flex-col items-center p-2 justify-evenly h-100',
+		emotionName: 'text-sm',
 		details: 'flex flex-col p-4',
 		name: 'text-xl font-bold',
 		comments: 'text-sm pt-2',
 		ratingStars: 'mt-auto',
-		spacer: 'h-8'
+		spacer: 'h-8',
+		img: 'w-28 h-28 mt-2 '
 	};
 </script>
 
 <div class={container}>
 	{#if foundEmotion}
 		<div class={emotion}>
-			<img src="/" />
-			{foundEmotion}
+			<img src={urlFor(foundEmotion.image).url()} alt={foundEmotion.name} class={img} />
+			<p class={emotionName}>{foundEmotion.name}</p>
 		</div>
 	{/if}
 	<div class={details}>
@@ -40,3 +43,9 @@
 		<p class={ratingStars}>{stars.join('')}</p>
 	</div>
 </div>
+
+<style>
+	img {
+		image-rendering: pixelated;
+	}
+</style>

src/routes/index.svelte

@@ -37,7 +37,7 @@
 	}
 
 	const { container} = {
-		container: 'h-screen overflow-auto'
+		container: 'h-screen overflow-auto w-screen'
 	}
 </script>