Scrollable modalcard

frontend/src/lib/components/card/ModalCard.svelte

@@ -5,6 +5,8 @@
 	import type Card from '$lib/types/Card';
 	import { cards } from '$lib/types/Card';
 	import SvelteMarkdown from 'svelte-markdown';
+	import CrossedEye from '../icons/CrossedEye.svelte';
+	import EyeIcon from '../icons/EyeIcon.svelte';
 
 	export let card: Card;
 
@@ -32,7 +34,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="modal" on:click|self={() => save(true)}>
 	<div class="content">
-		<div class="header">
+		<header>
 			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 			<div class="buttons">
 				<button
@@ -52,13 +54,17 @@
 					<CloseIcon />
 				</button>
 			</div>
-		</div>
+		</header>
 		<div class="tags">
 			<ModalTags {card} />
 		</div>
 		<div class="body">
 			<div class="toggleEdit" on:click|preventDefault={() => (editDescription = !editDescription)}>
-				👁
+				{#if editDescription}
+					<EyeIcon />
+				{:else}
+					<CrossedEye />
+				{/if}
 			</div>
 			{#if editDescription}
 				<textarea
@@ -84,22 +90,30 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		box-sizing: border-box;
+	}
 
 	.content {
 		background: #1e1e1e;
 		padding: 20px;
 		border-radius: 8px;
 		max-width: 1000px;
+		max-height: 90vh;
+		overflow-y: scroll;
 		width: 100%;
-			display: flex;
+		display: block;
-			justify-content: center;
+		box-sizing: border-box;
-			flex-direction: column;
-			gap: 30px;
-		}
 	}
 
-	.modal input,
+	header {
-	.modal textarea {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 20px;
+	}
+
+	input,
+	.body {
 		background: none;
 		color: inherit;
 		border: 1px solid #333;
@@ -107,25 +121,26 @@
 		padding: 4px;
 	}
 
-	.modal .title {
+	input {
 		font-size: 2rem;
 		font-weight: bold;
 		width: 100%;
 	}
 
-	.modal .header {
+	.body {
-		display: flex;
+		position: relative;
-		flex-direction: row;
+		font-size: 1.5rem;
-		justify-content: space-between;
+		min-height: 300px;
+		margin-top: 20px;
 	}
 
-	.modal .buttons {
+	.buttons {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
 
-	.modal button {
+	button {
 		margin-left: 5px;
 		height: 50px;
 		width: 50px;
@@ -134,48 +149,31 @@
 		border-radius: 10px;
 	}
 
-	.modal button:hover {
+	button:hover {
 		background-color: #333;
 		cursor: pointer;
 	}
 
-	.modal .buttons button:first-child:hover {
+	button:first-child:hover {
 		background-color: #433;
 	}
 
-	.modal .body {
-		margin-bottom: 20px;
-		// border: 1px solid red;
-		font-size: 1.5rem;
-
-		border: 1px solid #444;
-		min-height: 300px;
-		border-radius: 5px;
-		padding: 5px;
-		position: relative;
-
-		&:before {
-			transition: color 0.2s ease-in-out;
-		}
-
-		&:before:hover {
-			color: #333;
-		}
-	}
-
 	.toggleEdit {
 		position: absolute;
 		top: 10px;
 		right: 10px;
+		font-size: 2rem;
 		cursor: pointer;
 	}
 
-	.modal textarea {
+	textarea {
 		width: 100%;
 		min-height: 300px;
 		height: fit-content;
 		border: 0;
 		resize: none;
 		font-family: inherit;
+		background: none;
+		color: inherit;
 	}
 </style>

frontend/src/lib/components/icons/EyeIcon.svelte

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"
+	><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		fill="currentColor"
+		d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
+	/></svg
+>