Route description should be multiline (#1391)

Co-authored-by: Kevin Peters <kevin@wormholelabs.xyz>

Author: kev1n-peters

wormhole-connect/src/views/Bridge/RouteOptions.tsx

@@ -88,6 +88,7 @@ const useStyles = makeStyles()((theme: any) => ({
     gap: '8px',
     [theme.breakpoints.down('sm')]: {
       gap: '4px',
+      alignContent: 'center',
     },
   },
   routeRight: {
@@ -103,6 +104,17 @@ const useStyles = makeStyles()((theme: any) => ({
     opacity: '0.6',
     fontSize: '12px',
   },
+  multiLineChip: {
+    [theme.breakpoints.down('sm')]: {
+      height: 'auto',
+      '& .MuiChip-label': {
+        display: 'block',
+        whiteSpace: 'normal',
+        textAlign: 'center',
+        maxWidth: '256px',
+      },
+    },
+  },
 }));
 
 export function Banner(props: { text?: string; route?: RouteData }) {
@@ -227,13 +239,15 @@ function RouteOption(props: { route: RouteData; disabled: boolean }) {
                   color="success"
                   variant="outlined"
                   size="small"
+                  className={classes.multiLineChip}
                 />
               ) : (
                 <Chip
                   label="Approve a txn from your destination chain wallet"
                   color="warning"
                   variant="outlined"
                   size="small"
+                  className={classes.multiLineChip}
                 />
               )}
             </div>