Wrap elements of ManifestList on small screens

Author: marlo-longley

src/components/ManifestForm.jsx

@@ -38,15 +38,14 @@ export function ManifestForm({
   if (!addResourcesOpen) return null;
 
   return (
-<form onSubmit={formSubmit}>
+    <form onSubmit={formSubmit}>
       <Grid
         container
         spacing={2}
         columns={12}
-        wrap="nowrap"
         sx={{ mt: 0.5 }}
       >
-        <Grid size={9} sx={{ flexGrow: 1}}>
+        <Grid size={{ sm: 'grow', xs: 12 }}>
           <TextField
             autoFocus
             fullWidth

src/components/ManifestListItem.jsx

@@ -120,7 +120,7 @@ export function ManifestListItem({
         <Grid
           container
           className={ns('manifest-list-item')}
-          sx={{ width: '100%', alignItems: 'center', flexWrap: 'nowrap' }}
+          sx={{ width: '100%', alignItems: 'center' }}
         >
           <Grid size={{ sm: 5, xs: 12 }}>
             <ButtonBase
@@ -130,7 +130,6 @@ export function ManifestListItem({
               sx={{ justifyContent: 'flex-start', alignItems: 'center', width: '100%' }}
             >
               <Grid container component="div" sx={{ width: '100%' }}>
-                {/* <Grid size={3} sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', width: 120, flexShrink: 0, }} > */}
                 <Grid size={3} sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }} >
                   {thumbnail ? (
                     <StyledThumbnail

src/components/ManifestListItemError.jsx

@@ -14,8 +14,8 @@ export function ManifestListItemError({
 }) {
   const { t } = useTranslation();
   return (
-    <Grid container sx={{ width: '100%', alignItems: 'center', flexWrap: 'nowrap' }}>
-      <Grid container size={{ sm: 5, xs: 6 }} sx={{alignItems: 'center'}}>
+    <Grid container sx={{ width: '100%', alignItems: 'center' }}>
+      <Grid container size={{ sm: 5, xs: 12 }} sx={{alignItems: 'center'}}>
         <ErrorIcon sx={{
           color: 'error.main',
           height: '2rem',
@@ -27,7 +27,7 @@ export function ManifestListItemError({
           <Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
       </Grid>
 
-      <Grid container size={{ sm: 7, xs: 6 }}>
+      <Grid container size={{ sm: 7, xs: 12 }}>
         <Button onClick={() => { onDismissClick(manifestId); }}>
           {t('dismiss')}
         </Button>