Upgrade tailwindcss to version 3.4 (#664)

package-lock.json

@@ -28,7 +28,7 @@
 				"postcss": "^8.4.31",
 				"serpapi": "^1.1.1",
 				"tailwind-scrollbar": "^3.0.0",
-				"tailwindcss": "^3.3.1",
+				"tailwindcss": "^3.4.0",
 				"zod": "^3.22.3"
 			},
 			"devDependencies": {
@@ -63,6 +63,17 @@
 				"openai": "^4.14.2"
 			}
 		},
+		"node_modules/@alloc/quick-lru": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+			"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/@ampproject/remapping": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -2816,9 +2827,9 @@
 			"integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ=="
 		},
 		"node_modules/fast-glob": {
-			"version": "3.2.12",
-			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-			"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
 			"dependencies": {
 				"@nodelib/fs.stat": "^2.0.2",
 				"@nodelib/fs.walk": "^1.2.3",
@@ -2992,9 +3003,12 @@
 			}
 		},
 		"node_modules/function-bind": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
 		"node_modules/get-func-name": {
 			"version": "2.0.2",
@@ -3143,17 +3157,6 @@
 				"uglify-js": "^3.1.4"
 			}
 		},
-		"node_modules/has": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dependencies": {
-				"function-bind": "^1.1.1"
-			},
-			"engines": {
-				"node": ">= 0.4.0"
-			}
-		},
 		"node_modules/has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3168,6 +3171,17 @@
 			"resolved": "https://registry.npmjs.org/hash-wasm/-/hash-wasm-4.9.0.tgz",
 			"integrity": "sha512-7SW7ejyfnRxuOc7ptQHSf4LDoZaWOivfzqw+5rpcQku0nHfmicPKE51ra9BiRLAmT8+gGLestr1XroUkqdjL6w=="
 		},
+		"node_modules/hasown": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+			"integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/highlight.js": {
 			"version": "11.7.0",
 			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
@@ -3375,11 +3389,11 @@
 			}
 		},
 		"node_modules/is-core-module": {
-			"version": "2.11.0",
-			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-			"integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+			"version": "2.13.1",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+			"integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
 			"dependencies": {
-				"has": "^1.0.3"
+				"hasown": "^2.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
@@ -3460,9 +3474,9 @@
 			"dev": true
 		},
 		"node_modules/jiti": {
-			"version": "1.18.2",
-			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
-			"integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+			"integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
 			"bin": {
 				"jiti": "bin/jiti.js"
 			}
@@ -4602,16 +4616,16 @@
 			}
 		},
 		"node_modules/postcss-import": {
-			"version": "14.1.0",
-			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
-			"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+			"version": "15.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+			"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
 			"dependencies": {
 				"postcss-value-parser": "^4.0.0",
 				"read-cache": "^1.0.0",
 				"resolve": "^1.1.7"
 			},
 			"engines": {
-				"node": ">=10.0.0"
+				"node": ">=14.0.0"
 			},
 			"peerDependencies": {
 				"postcss": "^8.0.0"
@@ -4639,6 +4653,7 @@
 			"version": "3.1.4",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
 			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+			"dev": true,
 			"dependencies": {
 				"lilconfig": "^2.0.5",
 				"yaml": "^1.10.2"
@@ -4664,11 +4679,11 @@
 			}
 		},
 		"node_modules/postcss-nested": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
-			"integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+			"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
 			"dependencies": {
-				"postcss-selector-parser": "^6.0.10"
+				"postcss-selector-parser": "^6.0.11"
 			},
 			"engines": {
 				"node": ">=12.0"
@@ -5035,17 +5050,6 @@
 			"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
 			"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
 		},
-		"node_modules/quick-lru": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/rc": {
 			"version": "1.2.8",
 			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -5112,11 +5116,11 @@
 			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
 		},
 		"node_modules/resolve": {
-			"version": "1.22.1",
-			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-			"integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+			"version": "1.22.8",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+			"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
 			"dependencies": {
-				"is-core-module": "^2.9.0",
+				"is-core-module": "^2.13.0",
 				"path-parse": "^1.0.7",
 				"supports-preserve-symlinks-flag": "^1.0.0"
 			},
@@ -5866,44 +5870,89 @@
 			}
 		},
 		"node_modules/tailwindcss": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz",
-			"integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==",
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+			"integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
 			"dependencies": {
+				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
 				"chokidar": "^3.5.3",
-				"color-name": "^1.1.4",
 				"didyoumean": "^1.2.2",
 				"dlv": "^1.1.3",
-				"fast-glob": "^3.2.12",
+				"fast-glob": "^3.3.0",
 				"glob-parent": "^6.0.2",
 				"is-glob": "^4.0.3",
-				"jiti": "^1.17.2",
-				"lilconfig": "^2.0.6",
+				"jiti": "^1.19.1",
+				"lilconfig": "^2.1.0",
 				"micromatch": "^4.0.5",
 				"normalize-path": "^3.0.0",
 				"object-hash": "^3.0.0",
 				"picocolors": "^1.0.0",
-				"postcss": "^8.0.9",
-				"postcss-import": "^14.1.0",
-				"postcss-js": "^4.0.0",
-				"postcss-load-config": "^3.1.4",
-				"postcss-nested": "6.0.0",
+				"postcss": "^8.4.23",
+				"postcss-import": "^15.1.0",
+				"postcss-js": "^4.0.1",
+				"postcss-load-config": "^4.0.1",
+				"postcss-nested": "^6.0.1",
 				"postcss-selector-parser": "^6.0.11",
-				"postcss-value-parser": "^4.2.0",
-				"quick-lru": "^5.1.1",
-				"resolve": "^1.22.1",
-				"sucrase": "^3.29.0"
+				"resolve": "^1.22.2",
+				"sucrase": "^3.32.0"
 			},
 			"bin": {
 				"tailwind": "lib/cli.js",
 				"tailwindcss": "lib/cli.js"
 			},
 			"engines": {
-				"node": ">=12.13.0"
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/tailwindcss/node_modules/postcss-load-config": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+			"integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"lilconfig": "^3.0.0",
+				"yaml": "^2.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
 			},
 			"peerDependencies": {
-				"postcss": "^8.0.9"
+				"postcss": ">=8.0.9",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				},
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/tailwindcss/node_modules/postcss-load-config/node_modules/lilconfig": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
+			"integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/tailwindcss/node_modules/yaml": {
+			"version": "2.3.4",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+			"integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+			"engines": {
+				"node": ">= 14"
 			}
 		},
 		"node_modules/tar-fs": {
@@ -6665,6 +6714,7 @@
 			"version": "1.10.2",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
 			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}

package.json

@@ -64,7 +64,7 @@
 		"postcss": "^8.4.31",
 		"serpapi": "^1.1.1",
 		"tailwind-scrollbar": "^3.0.0",
-		"tailwindcss": "^3.3.1",
+		"tailwindcss": "^3.4.0",
 		"zod": "^3.22.3"
 	},
 	"optionalDependencies": {

src/lib/components/MobileNav.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <nav
-	class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
+	class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
 >
 	<button
 		type="button"

src/lib/components/NavMenu.svelte

@@ -61,7 +61,7 @@
 	</a>
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
+	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
 >
 	{#each Object.entries(groupedConversations) as [group, convs]}
 		{#if convs.length}
@@ -89,7 +89,7 @@
 			>
 			<button
 				type="submit"
-				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none md:hidden dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
 			>
 				Sign Out
 			</button>

src/lib/components/chat/ChatIntroduction.svelte

@@ -78,7 +78,7 @@
 				{#each currentModelMetadata.promptExamples as example}
 					<button
 						type="button"
-						class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
+						class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 sm:p-4 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
 						on:click={() => dispatch("message", example.prompt)}
 					>
 						{example.title}

src/lib/components/chat/ChatMessage.svelte

@@ -158,7 +158,7 @@
 			{/if}
 
 			<div
-				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+				class="prose max-w-none max-sm:prose-sm dark:prose-invert prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
 				bind:this={contentEl}
 			>
 				{#each tokens as token}
@@ -266,7 +266,7 @@
 				<div class="absolute right-0 top-3.5 flex gap-2 lg:-right-2">
 					{#if downloadLink}
 						<a
-							class="rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+							class="rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 md:hidden dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
 							title="Download prompt and parameters"
 							type="button"
 							target="_blank"
@@ -277,7 +277,7 @@
 					{/if}
 					{#if !readOnly}
 						<button
-							class="cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
+							class="cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 md:hidden lg:-right-2 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
 							title="Retry"
 							type="button"
 							on:click={() => dispatch("retry", { content: message.content, id: message.id })}

src/lib/components/chat/ChatWindow.svelte

@@ -109,7 +109,7 @@
 	/>
 
 	<div
-		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
+		class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 max-md:border-t max-md:bg-white sm:px-5 md:py-8 xl:max-w-4xl dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:dark:bg-gray-900 [&>*]:pointer-events-auto"
 	>
 		{#if sources.length}
 			<div class="flex flex-row flex-wrap justify-center gap-2.5 max-md:pb-3">
@@ -190,13 +190,13 @@
 
 						{#if loading}
 							<button
-								class="btn mx-1 my-1 inline-block h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:hidden"
+								class="btn mx-1 my-1 inline-block h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 md:hidden dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
 								on:click={() => dispatch("stop")}
 							>
 								<CarbonStopFilledAlt />
 							</button>
 							<div
-								class="mx-1 my-1 hidden h-[2.4rem] items-center p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100 md:flex"
+								class="mx-1 my-1 hidden h-[2.4rem] items-center p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 md:flex dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
 							>
 								<EosIconsLoading />
 							</div>

src/routes/+layout.svelte

@@ -148,7 +148,7 @@
 </svelte:head>
 
 <div
-	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300 md:grid-cols-[280px,1fr] md:grid-rows-[1fr]"
+	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd md:grid-cols-[280px,1fr] md:grid-rows-[1fr] dark:text-gray-300"
 >
 	<MobileNav
 		isOpen={isNavOpen}