test-app: Responsive demos displayed in a row (#1600)

Author: FlyersPh9

apps/test-app/app/mui/Avatar.showcase.tsx

@@ -10,7 +10,7 @@ import AvatarInitials from "examples/mui/Avatar.initials.tsx";
 
 export default function AvatarExamples() {
 	return (
-		<Stack spacing={1} direction="row">
+		<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 			<AvatarDefault />
 			<AvatarInitials />
 			<AvatarIcon />

apps/test-app/app/mui/CircularProgress.showcase.tsx

@@ -12,7 +12,7 @@ export default function CircularProgressExamples() {
 		<>
 			<CircularProgressDefault />
 			{!isProduction && (
-				<Stack spacing={1} direction="row">
+				<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 					<CircularProgressColors_ />
 				</Stack>
 			)}

apps/test-app/app/mui/IconButton.showcase.tsx

@@ -15,12 +15,12 @@ export default function IconButtonExamples() {
 			<IconButtonDefault />
 			<IconButtonSizes />
 			{!isProduction && (
-				<Stack spacing={1} direction="row">
+				<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 					<IconButtonColors_ />
 				</Stack>
 			)}
 			{!isProduction && (
-				<Stack spacing={1} direction="row">
+				<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 					<IconButtonPlacements_ />
 				</Stack>
 			)}

apps/test-app/app/mui/Link.showcase.tsx

@@ -2,7 +2,6 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import Stack from "@mui/material/Stack";
 import LinkColors_ from "examples/mui/Link._colors.tsx";
 import LinkDefault from "examples/mui/Link.default.tsx";
 import { isProduction } from "~/~utils.tsx";
@@ -11,11 +10,7 @@ export default function LinkExamples() {
 	return (
 		<>
 			<LinkDefault />
-			{!isProduction && (
-				<Stack spacing={1} direction="row">
-					<LinkColors_ />
-				</Stack>
-			)}
+			{!isProduction && <LinkColors_ />}
 		</>
 	);
 }

apps/test-app/app/mui/ToggleButton.showcase.tsx

@@ -18,7 +18,7 @@ export default function ToggleButtonExamples() {
 			<ToggleButtonSizes />
 			<ToggleButtonText />
 			{!isProduction && (
-				<Stack spacing={1} direction="row">
+				<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 					<ToggleButtonPlacements_ />
 				</Stack>
 			)}

examples/mui/Button._icons.tsx

@@ -11,7 +11,7 @@ import svgPlaceholder from "@stratakit/icons/placeholder.svg";
 
 export default () => {
 	return (
-		<Stack spacing={1} direction="row">
+		<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 			<Button startIcon={<Icon href={svgPlaceholder} />}>Start icon</Button>
 			<Button endIcon={<Icon href={svgPlaceholder} />}>End icon</Button>
 			<Button

examples/mui/Button._permutations.tsx

@@ -34,7 +34,13 @@ export default () => {
 						{variants.map((variant) => {
 							const variantName = `${variant.charAt(0).toUpperCase()}${variant.slice(1)}`;
 							return (
-								<Stack key={variant} spacing={1} direction="row">
+								<Stack
+									key={variant}
+									spacing={1}
+									direction="row"
+									useFlexGap
+									sx={{ flexWrap: "wrap" }}
+								>
 									{colors.map((color) => {
 										return (
 											<Button

examples/mui/Button.colors.tsx

@@ -8,7 +8,7 @@ import Stack from "@mui/material/Stack";
 
 export default () => {
 	return (
-		<Stack spacing={1} direction="row">
+		<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 			<Button color="primary">Primary</Button>
 			<Button color="secondary">Secondary</Button>
 			<Button color="error">Error</Button>

examples/mui/Button.sizes.tsx

@@ -8,7 +8,12 @@ import Stack from "@mui/material/Stack";
 
 export default () => {
 	return (
-		<Stack spacing={1} direction="row" sx={{ alignItems: "center" }}>
+		<Stack
+			spacing={1}
+			direction="row"
+			useFlexGap
+			sx={{ alignItems: "center", flexWrap: "wrap" }}
+		>
 			<Button size="small">Small</Button>
 			<Button size="medium">Medium</Button>
 			<Button size="large">Large</Button>

examples/mui/Button.variants.tsx

@@ -8,7 +8,7 @@ import Stack from "@mui/material/Stack";
 
 export default () => {
 	return (
-		<Stack spacing={1} direction="row">
+		<Stack spacing={1} direction="row" useFlexGap sx={{ flexWrap: "wrap" }}>
 			<Button variant="contained">Contained</Button>
 			<Button variant="outlined">Outlined</Button>
 			<Button variant="text">Text</Button>