Update Toolbar to use CSS grid (#2361)

## Summary:
This PR makes it so elements passed to the `title` of a `Toolbar` can set `max-width: 100%` to ensure the title never overlaps `leftContent` or `rightContent`.

This PR also:
- Slightly changes the wrapping behavior of long titles. This is not intended, but it is unavoidable, so I've matched the original behavior as closely as I can.
- Makes the spacing more consistent when using responsive buttons that grow to take up the full footer width on mobile in `rightContent`.

When we update webapp to use this version, we will need to update the following locations to use `100%` in place of `100vw`:

```
services/static/javascript/content-library/ui/default-content-footer-buttons.tsx:
  496:             width: "100vw",

services/static/javascript/python-coding/python-content-footer.tsx:
  124:             width: "100vw",

services/static/javascript/python-coding/programs/embedded-python-user-program-page.tsx:
  140:         width: "100vw",

services/static/javascript/python-coding/programs/footer.tsx:
  300:             width: "100vw",

services/static/javascript/wonder-blocks-package/wonder-blocks-toolbar.stories.tsx:
  18:             width: "100vw",
```

Issue: AX-315

## Test plan:
Check out the `Toolbar` stories

Author: timmcca-be

Reviewers: jandrade, timmcca-be

Required Reviewers:

Approved By: jandrade

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ⏭️  Publish npm snapshot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⌛ undefined

Pull Request URL: #2361

.changeset/plenty-rocks-mix.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-toolbar": major
+---
+
+Update Toolbar to use CSS grid. This allows consumers to set `max-width: 100%` on elements passed to the `title` prop to ensure the title does not overlap `leftContent` or `rightContent`. Consumers dependent on the flex behavior of the previous implementation will need to update to support the grid layout. Namely, any consumer using a hack like `width: 100vw` on `rightContent` to force it to take up the full width of the toolbar on mobile will need to use `width: 100%` instead.

__docs__/wonder-blocks-toolbar/toolbar.argtypes.tsx

@@ -20,7 +20,8 @@ const styles = StyleSheet.create({
     fillContent: {
         marginLeft: spacing.small_12,
         [mobile]: {
-            width: "100vw",
+            marginLeft: 0,
+            width: "100%",
         },
     },
     onlyDesktop: {

__docs__/wonder-blocks-toolbar/toolbar.stories.tsx

@@ -228,6 +228,7 @@ export const CustomToolbar: StoryComponentType = {
             <View
                 style={{
                     width: 300,
+                    maxWidth: "100%",
                     height: spacing.xSmall_8,
                     background: semanticColor.mastery.primary,
                 }}

packages/wonder-blocks-toolbar/src/components/toolbar.tsx

@@ -81,54 +81,39 @@ export default function Toolbar({
         <View
             style={[
                 sharedStyles.container,
+                !title
+                    ? sharedStyles.containerWithNoTitle
+                    : typeof title === "string"
+                    ? sharedStyles.containerWithTextTitle
+                    : sharedStyles.containerWithNodeTitle,
                 color === "dark" && sharedStyles.dark,
                 size === "small" && sharedStyles.small,
             ]}
         >
-            <View
-                style={[
-                    sharedStyles.column,
-                    sharedStyles.leftColumn,
-                    title ? sharedStyles.withTitle : null,
-                ]}
-            >
-                {leftContent}
-            </View>
+            <View style={sharedStyles.leftColumn}>{leftContent}</View>
 
-            {title && typeof title === "string" ? (
-                <View style={[sharedStyles.column, sharedStyles.wideColumn]}>
-                    <View style={[sharedStyles.titles, sharedStyles.center]}>
-                        <TitleComponent id="wb-toolbar-title">
-                            {title}
-                        </TitleComponent>
-                        {subtitle && (
-                            <LabelSmall
-                                style={
-                                    color === "light" && sharedStyles.subtitle
-                                }
-                            >
-                                {subtitle}
-                            </LabelSmall>
-                        )}
-                    </View>
-                </View>
-            ) : (
-                // We don't use wideColumn here to allow more flexibility with
-                // the custom node.
-                <View style={[sharedStyles.column]}>
-                    <View style={[sharedStyles.titles]}>{title}</View>
+            {title && typeof title === "string" && (
+                <View style={sharedStyles.titles}>
+                    <TitleComponent id="wb-toolbar-title">
+                        {title}
+                    </TitleComponent>
+                    {subtitle && (
+                        <LabelSmall
+                            style={color === "light" && sharedStyles.subtitle}
+                        >
+                            {subtitle}
+                        </LabelSmall>
+                    )}
                 </View>
             )}
+            {title && typeof title !== "string" && (
+                <View style={sharedStyles.titles}>{title}</View>
+            )}
+            {!title && (
+                <View style={leftContent ? sharedStyles.spacer : undefined} />
+            )}
 
-            <View
-                style={[
-                    sharedStyles.column,
-                    sharedStyles.rightColumn,
-                    title ? sharedStyles.withTitle : null,
-                ]}
-            >
-                {rightContent}
-            </View>
+            <View style={sharedStyles.rightColumn}>{rightContent}</View>
         </View>
     );
 }
@@ -137,13 +122,23 @@ const sharedStyles = StyleSheet.create({
     container: {
         border: `1px solid ${color.offBlack16}`,
         flex: 1,
-        flexDirection: "row",
-        justifyContent: "space-between",
+        display: "grid",
+        alignItems: "center",
         minHeight: 66,
         paddingLeft: spacing.medium_16,
         paddingRight: spacing.medium_16,
         width: "100%",
     },
+    containerWithTextTitle: {
+        gridTemplateColumns: "1fr minmax(auto, 67%) 1fr",
+    },
+    containerWithNodeTitle: {
+        gridTemplateColumns:
+            "minmax(max-content, 1fr) auto minmax(max-content, 1fr)",
+    },
+    containerWithNoTitle: {
+        gridTemplateColumns: "auto auto 1fr",
+    },
     small: {
         minHeight: 50,
     },
@@ -152,36 +147,27 @@ const sharedStyles = StyleSheet.create({
         boxShadow: `0 1px 0 0 ${color.white64}`,
         color: "white",
     },
-    column: {
-        justifyContent: "center",
-    },
-    withTitle: {
-        flex: 1,
-    },
-    wideColumn: {
-        flex: 1,
-        flexBasis: "50%",
-    },
     leftColumn: {
         alignItems: "center",
         flexDirection: "row",
-        // TODO(WB-1445): Find a way to replicate this behavior with
-        // rightContent.
-        flexShrink: 0,
         justifyContent: "flex-start",
     },
     rightColumn: {
         alignItems: "center",
         flexDirection: "row",
         justifyContent: "flex-end",
-    },
-    center: {
-        textAlign: "center",
+        flexGrow: 1,
     },
     subtitle: {
         color: color.offBlack64,
     },
     titles: {
         padding: spacing.small_12,
+        textAlign: "center",
+        justifySelf: "center",
+        maxWidth: "100%",
+    },
+    spacer: {
+        minWidth: spacing.small_12,
     },
 });