Improve null GPU adapter experience on Live Examples page (#565)

apps/typegpu-docs/src/components/design/Snackbar.tsx

@@ -3,7 +3,7 @@ export function Snackbar(props: { text: string }) {
 
   return (
     <div
-      className="absolute bottom-4 right-4 z-40 flex items-center gap-4 w-full max-w-[min(28rem,calc(100vw-2rem))] p-4 text-gray-500 bg-red-100 rounded-lg"
+      className="absolute bottom-8 right-8 z-40 flex items-center gap-4 max-w-[min(28rem,calc(100vw-4rem))] p-4 text-gray-500 bg-red-100 rounded-lg box-border"
       role="alert"
     >
       <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500">
@@ -19,7 +19,7 @@ export function Snackbar(props: { text: string }) {
         <span className="sr-only">Error icon</span>
       </div>
 
-      <div className="text-sm text-gray-600">{text}</div>
+      <div className="overflow-auto text-sm text-gray-600">{text}</div>
     </div>
   );
 }

apps/typegpu-docs/src/content/docs/blog/troubleshooting.md

@@ -1,10 +1,11 @@
 ---
 title: How to enable WebGPU on your device
 date: 2024-10-04
-lastUpdated: 2024-11-12
+lastUpdated: 2024-11-15
 tags:
   - Safari
   - iPhone
+  - Chrome
   - Troubleshooting
   - macOS
   - WebGPU support
@@ -68,3 +69,7 @@ If you are running Deno 1.39 or newer you can either:
   "webgpu"
 ]
 ```
+
+## Chrome for Android and desktop
+
+WebGPU for Google Chrome should work by default on Android and desktop devices, just make sure you run the newest available version of the app. If however it does not work, you might need to try enabling some experimental flags listed in the official [Chrome developer documentation](https://developer.chrome.com/docs/web-platform/webgpu/troubleshooting-tips).

apps/typegpu-docs/src/utils/isGPUSupported.ts

@@ -1 +1,4 @@
-export const isGPUSupported = navigator.gpu !== undefined;
+const adapter = await navigator.gpu?.requestAdapter();
+adapter?.requestDevice().then((device) => device.destroy());
+
+export const isGPUSupported = !!adapter;