fixes

apps/ui/src/lib/components/Explainer.svelte

@@ -12,6 +12,7 @@
 </script>
 
 <div class={`dropdown dropdown-end ${position}`}>
+	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-sky-500">
 	  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 	</label>

apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte

@@ -40,4 +40,6 @@
 	<Icons.Laravel {isAbsolute} />
 {:else if application.buildPack?.toLowerCase() === 'heroku'}
 	<Icons.Heroku {isAbsolute} />
+{:else if application.buildPack?.toLowerCase() === 'compose'}
+	<Icons.Compose {isAbsolute} />
 {/if}

apps/ui/src/lib/components/svg/applications/Compose.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<img
+	alt="docker compose logo"
+	class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-8' : 'w-8 h-8 mx-auto'}
+	src="/docker-compose.png"
+/>

apps/ui/src/lib/components/svg/applications/index.ts

@@ -17,3 +17,4 @@ export { default as Eleventy } from './Eleventy.svelte';
 export { default as Deno } from './Deno.svelte';
 export { default as Laravel } from './Laravel.svelte';
 export { default as Heroku } from './Heroku.svelte';
+export { default as Compose } from './Compose.svelte';