Scaling tweaks

src/app.scss

@@ -87,6 +87,7 @@ body:has(.bytemd-fullscreen) {
 	}
 
 	.CodeMirror {
+		font-size: 1rem;
 		color: var(--editor-text);
 		background-color: var(--editor-bg);
 	}
@@ -133,3 +134,11 @@ body:has(.bytemd-fullscreen) {
 		--editor-bg: var(--note-color, hsl(0 0% 80%));
 	}
 }
+
+@media (min-width: 768px) {
+	.bytemd {
+		.CodeMirror {
+			font-size: 0.9rem;
+		}
+	}
+}

src/lib/components/notes/note-list.svelte

@@ -75,10 +75,9 @@
 
 <style lang="scss">
 	.note-list {
-		--note-width: 350px;
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(0, var(--note-width)));
+		grid-template-columns: repeat(auto-fill, minmax(0, calc(var(--note-height, 385px) * 0.92)));
-		grid-auto-rows: var(--note-height, calc(var(--note-width) * 1.1));
+		grid-auto-rows: var(--note-height, 385px);
 		gap: var(--note-gap, 1rem);
 		justify-content: center;
 		height: var(--scroll-height, auto);

src/lib/components/notes/note-tags.svelte

@@ -57,10 +57,10 @@
 
 		&__tag,
 		&__textbox input {
-			font-size: 0.8rem;
+			font-size: 1rem;
 			width: auto;
 			height: auto;
-			padding: 0 0.4rem;
+			padding: 0 0.5em;
 			margin: 0;
 			color: inherit;
 			background-color: transparent;
@@ -70,7 +70,7 @@
 		&__tag {
 			display: flex;
 			align-items: center;
-			gap: 0.3rem;
+			gap: 0.4em;
 			border: 1px solid hsl(0 0% 0% / 0.4);
 			border-radius: 0.8em;
 		}
@@ -99,4 +99,13 @@
 			}
 		}
 	}
+
+	@media (min-width: 768px) {
+		.note-tags {
+			&__tag,
+			&__textbox input {
+				font-size: 0.8rem;
+			}
+		}
+	}
 </style>

src/lib/components/notes/note-timestamp.svelte

@@ -24,6 +24,7 @@
 <style lang="scss">
 	time {
 		font-size: 0.85em;
+		text-align: right;
 		color: hsl(0 0% 0% / 0.5);
 	}
 </style>