Improve log modal styles, a11y, error message wording

packages/playground/blueprints/src/lib/resources.ts

@@ -229,30 +229,26 @@ export abstract class FetchResource extends Resource {
 			throw new Error(
 				`Could not download "${url}".
 				Check if the URL is correct and the server is reachable.
-				If the url is reachable, the server might be blocking the request.
-				Check the console and network for more information.
+				If it is reachable, the server might be blocking the request.
+				Check the browser console and network tabs for more information.
 
-				## Does the console shows an error about "No 'Access-Control-Allow-Origin' header"?
+				## Does the console show the error "No 'Access-Control-Allow-Origin' header"?
 
-				This means the server where your file is hosted does not allow requests from other sites
-				(cross-origin requests, or CORS).	You will need to move it to another server that allows
-				cross-origin file downloads. You can learn more about CORS at
+				This means the server that hosts your file does not allow requests from other sites
+				(cross-origin requests, or CORS).	You need to move the asset to a server that allows
+				cross-origin file downloads. Learn more about CORS at
 				https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
 
-				If you're loading a file from https://github.com/, there's an easy fix – you can load it from
-				raw.githubusercontent.com instead. Here's how to do that:
+				If your file is on GitHub, load it from "raw.githubusercontent.com".
+				Here's how to do that:
 
-				1. Start with the original GitHub URL for the file. For example:
-				'''
-				https://github.com/username/repository/blob/branch/filename
-				'''
-				2. Replace 'github.com' with 'raw.githubusercontent.com'.
-				3. Remove the '/blob/' part of the URL.
+				1. Start with the original GitHub URL of the file. For example:
+				https://github.com/username/repository/blob/branch/filename.
+				2. Replace "github.com" with "raw.githubusercontent.com".
+				3. Remove the "/blob/" part of the URL.
 
 				The resulting URL should look like this:
-				'''
 				https://raw.githubusercontent.com/username/repository/branch/filename
-				'''
 
 				Error:
 				${e}`

packages/playground/website/src/components/log-modal/index.tsx

@@ -45,7 +45,7 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 				<h2>{props.title || 'Logs'}</h2>
 				{props.description}
 				<TextControl
-					title="Search"
+					aria-label="Search"
 					placeholder="Search logs"
 					value={searchTerm}
 					onChange={setSearchTerm}

packages/playground/website/src/components/log-modal/style.module.css

@@ -10,5 +10,7 @@
 .log-modal__log {
 	text-wrap: wrap;
 	word-wrap: break-word;
-	margin: 0.5rem 0;
-}
+	padding: .5rem 0;
+	white-space-collapse: preserve-breaks;
+	border-block-end: 1px dashed currentcolor;
+}