docs(website): Fix mobile overflow and polish homepage

docs/core/api/useSuspense.md

@@ -217,17 +217,17 @@ Cache policy is [Stale-While-Revalidate](https://tools.ietf.org/html/rfc5861) by
 
 :::
 
-:::react
+::::react
 
-::::info[React Native]
+:::info[React Native]
 
 When using React Navigation, useSuspense() will trigger fetches on focus if the data is considered
 stale.
 
-::::
-
 :::
 
+::::
+
 <ConditionalDependencies />
 
 ## Types

website/src/components/Grid.module.css

@@ -1,22 +1,22 @@
 
 .grid {
   display: grid;
-  grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   column-gap: 15px;
 }
 
 .grid.wrap :global(.prism-code) {
   white-space: pre-wrap;
-  word-break: break-all;
+  overflow-wrap: anywhere;
 }
 
 @media only screen and (max-width: 768px) {
   .grid {
-    grid-template-columns: minmax(min-content, 1fr);
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 @media only screen and (min-width: 997px) and (max-width: 1268px) {
   .grid {
-    grid-template-columns: minmax(min-content, 1fr);
+    grid-template-columns: minmax(0, 1fr);
   }
 }

website/src/components/Grid.tsx

@@ -8,7 +8,6 @@ export default function Grid({
   wrap = false,
 }: {
   children: ReactNode;
-  cols?: number;
   wrap?: boolean;
 }) {
   return (

website/src/components/HomepageFeatures.module.css

@@ -1,12 +1,25 @@
 .features {
-  display: flex;
-  align-items: center;
   margin: 3.2rem 0;
   padding: 0;
   width: 100%;
 }
 
+.feature {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
 .featureSvg {
-  height: 60px;
-  width: 60px;
+  height: 56px;
+  width: 56px;
+  margin-bottom: 0.75rem;
+  color: var(--ifm-color-primary);
+}
+
+@media screen and (max-width: 996px) {
+  .feature {
+    margin-bottom: 2rem;
+  }
 }

website/src/components/HomepageFeatures.tsx

@@ -1,35 +1,19 @@
 import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import ThemedImage from '@theme/ThemedImage';
 import clsx from 'clsx';
 import React from 'react';
 
 import styles from './HomepageFeatures.module.css';
 import ChemicalCompositionSvg from '../../static/img/chemical-composition.svg';
 import FastCarSvg from '../../static/img/fast-car.svg';
 import GrowingBarChartSvg from '../../static/img/growing-bar-chart.svg';
+import TypeScriptSvg from '../../static/img/typescript-mono.svg';
 
-type SvgComponent = React.ComponentType<React.ComponentProps<'svg'>>;
-
-interface BaseFeature {
+interface FeatureItem {
   description: React.ReactNode;
   title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
 }
 
-interface SvgFeature extends BaseFeature {
-  Svg: SvgComponent;
-  dark?: never;
-  light?: never;
-}
-
-interface ThemedImageFeature extends BaseFeature {
-  dark: string;
-  light: string;
-  Svg?: never;
-}
-
-type FeatureItem = SvgFeature | ThemedImageFeature;
-
 const featureList: FeatureItem[] = [
   {
     description: (
@@ -39,8 +23,7 @@ const featureList: FeatureItem[] = [
         make it easy to avoid race conditions
       </>
     ),
-    light: '/img/typescript.svg',
-    dark: '/img/typescript.dark.svg',
+    Svg: TypeScriptSvg,
     title: 'Data Integrity',
   },
   {
@@ -82,57 +65,16 @@ const featureList: FeatureItem[] = [
   },
 ];
 
-function isSvgFeature(feature: FeatureItem): feature is SvgFeature {
-  return 'Svg' in feature && feature.Svg != null;
-}
-
-function Feature(feature: FeatureItem) {
-  const { title, description } = feature;
+function Feature({ title, description, Svg }: FeatureItem) {
   return (
-    <div className={clsx('col col--3')}>
-      <div className="text--center">
-        {isSvgFeature(feature) ?
-          <SvgFeatureIcon Svg={feature.Svg} title={title} />
-        : <ThemedFeatureIcon
-            light={feature.light}
-            dark={feature.dark}
-            title={title}
-          />
-        }
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
+    <div className={clsx('col col--3', styles.feature)}>
+      <Svg className={styles.featureSvg} role="img" aria-label={title} />
+      <h3>{title}</h3>
+      <p>{description}</p>
     </div>
   );
 }
 
-function SvgFeatureIcon({ Svg, title }: { Svg: SvgComponent; title: string }) {
-  return <Svg className={styles.featureSvg} aria-label={title} />;
-}
-
-function ThemedFeatureIcon({
-  light,
-  dark,
-  title,
-}: {
-  light: string;
-  dark: string;
-  title: string;
-}) {
-  return (
-    <ThemedImage
-      className={styles.featureSvg}
-      alt={title}
-      sources={{
-        light: useBaseUrl(light),
-        dark: useBaseUrl(dark),
-      }}
-    />
-  );
-}
-
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>

website/src/components/StackBlitz.module.css

@@ -0,0 +1,63 @@
+.wrapper {
+  position: relative;
+  margin-bottom: var(--ifm-spacing-vertical);
+  border-radius: var(--ifm-code-border-radius);
+  overflow: hidden;
+  background: var(--monoco-code-background);
+  box-shadow: var(--ifm-global-shadow-lw);
+}
+
+/* Sits behind the transparent placeholder iframe; the loaded embed paints over it */
+.loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(191, 199, 213);
+  font-size: 0.9rem;
+  letter-spacing: 0.02em;
+}
+
+.frame {
+  position: relative;
+  display: block;
+  border: 0;
+  max-width: 100%;
+  max-height: calc(100vh - 64px);
+}
+
+.card {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: var(--ifm-spacing-vertical);
+  padding: 1.5rem 1rem;
+  border-radius: var(--ifm-code-border-radius);
+  background: var(--ifm-color-emphasis-100);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-align: center;
+}
+
+.cardTitle {
+  margin: 0;
+  font-weight: var(--ifm-font-weight-semibold);
+}
+
+.cardLinks {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* Matches Docusaurus' mobile breakpoint (useWindowSize) */
+@media (max-width: 996px) {
+  .wrapper {
+    display: none;
+  }
+  .card {
+    display: flex;
+  }
+}