working modal but still munted styles

src/app.css

@@ -10,7 +10,7 @@ body {
 	min-height: 100%;
 	padding: 1em;
 	width: 100%;
-	font-size: 1.2em;
+	font-size: 1.15em;
 	border: double 3px #ddd;
 	border-top: none;
 	border-bottom: none;

src/lib/components/Filterable.svelte

@@ -152,7 +152,7 @@
 
 	/* instance-specific styles */
 	.filter {
-		font-size: 80%;
+		font-size: 0.8em;
 		margin-right: 0.5em;
 		line-height: 2.5;
 		padding: 6px 8px;

src/lib/components/TechnologyTile.svelte

@@ -2,9 +2,9 @@
     // a 'technology' object
     export let technology;
     export let affiliate_colours;
-    import { Button, Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
+    import { Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
 
-    let showModal = false;
+    let show = false;
 
 	const formatter = new Intl.ListFormat('en', {
 	  style: 'long',
@@ -41,7 +41,8 @@
 
 <!-- making a dive act like a button: https://kvack.dev/blog/make-that-div-behave-like-a-button -->
 
-<button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology">
+<button on:click={() => (show = !show)} tabindex=0 class="tile technology">
+    <h2>{technology.name}</h2>
     <div class="links">
 		<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
         {#if technology.repository}<span class="repository"><a
@@ -50,10 +51,11 @@
 			href={technology.wikipedia}
 			title="Wikipedia Page for {technology.name}">W</a></span>{/if}
     </div>
-    <h2>{technology.name}</h2>
+
     <p class="description">{technology.description}{#if technology.extended_description}<span
         title={technology.extended_description}>i</span>{/if}
     </p>
+    <div class="details">
     {#if technology.categories}<p class="property categories">{pluraliser('Category',
 		'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
     {#if technology.analogues}<p class="property analogues">Alternative to <span
@@ -61,6 +63,7 @@
     {#if technology.license}<p class="property license"
         title="The libre license for this project is {technology.license}">License: <span
 		class="value">{technology.license}</span></p>{/if}
+	</div>
     {#if hasInstances(technology)}
         <div class="instances">
             <p>{#each technology.instances as instance}<a
@@ -75,7 +78,7 @@
     {/if}
 </button>
 
-<Modal title="{technology.name}" bind:showModal>
+<Modal title="{technology.name}" bind:show dismissible>
 	<ModalBody>
 		Modal stuff...
 	</ModalBody>
@@ -98,6 +101,7 @@
 		box-sizing: border-box;
         display: inline-block;
 		height: 515px;
+		line-height: 1.2;
 		margin-bottom: 10px;
 		margin-right: 18px;
 		margin-top: 8px;
@@ -105,13 +109,14 @@
 		position: relative;
 		text-align: left;
 		text-overflow: ellipsis;
-		vertical-align: top;
+		vertical-align: top !important;
 		width: 290px;
 	}
 	.tile .links {
 		position: absolute;
 		top: 0;
 		right: 0;
+		/*float: right;*/
 		padding: 2px 6px;
 		font-size: 90%;
 	}
@@ -133,6 +138,10 @@
 		color: #fff !important;
 	}
 	.tile h2 {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 100%;
 		background-color: #999;
 		text-align: center;
 		padding: 0.5em;
@@ -149,9 +158,11 @@
 	}
 	.tile .description {
 		height: 200px;
+		line-height: 1.2em;
 		text-overflow: ellipsis;
 		overflow: hidden;
 		padding-top: 0.5em;
+		vertical-align: top;
 	}
 	.tile p {
 		padding: 0 0.7em 0.2em 0.7em;
@@ -162,15 +173,22 @@
 		padding: 0.2em 0.7em;
 		margin: 0;
 	}
+	.tile .details {
+		vertical-align: bottom;
+	}
 	.instances {
 		background-color: #ddd;
 		position: absolute;
 		bottom: 0;
 		height: 2.5em;
-		width: 100%;
+		width: 100% !important;
+		vertical-align: middle;
+	}
+	.instances p {
+		width: 100%;
+		padding-top: 0.7em;
 		vertical-align: middle;
 	}
-	.instances p { padding-top: 0.7em; vertical-align: middle; }
 	.instances .marker {
 		margin-right: 3px;
 	}