Mobile responsiveness fixes

resources/scripts/components/server/backups/BackupRow.tsx

@@ -40,33 +40,35 @@ export default ({ backup, className }: Props) => {
     });
 
     return (
-        <GreyRowBox css={tw`flex items-center`} className={className}>
-            <div css={tw`mr-4`}>
-                {backup.completedAt ?
-                    <FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300 hidden md:block`}/>
-                    :
-                    <Spinner size={'small'}/>
-                }
-            </div>
-            <div css={tw`flex-1`}>
-                <p css={tw`flex items-center text-sm mb-1`}>
-                    {!backup.isSuccessful &&
-                    <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
-                        Failed
-                    </span>
+        <GreyRowBox css={tw`flex-wrap md:flex-no-wrap items-center`} className={className}>
+            <div css={tw`flex items-center truncate w-full md:flex-1`}>
+                <div css={tw`mr-4`}>
+                    {backup.completedAt ?
+                        <FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
+                        :
+                        <Spinner size={'small'}/>
                     }
-                    <div css={tw`break-all`}>
-                        {backup.name}
+                </div>
+                <div css={tw`flex flex-col truncate`}>
+                    <div css={tw`flex items-center text-sm mb-1`}>
+                        {!backup.isSuccessful &&
+                        <span css={tw`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}>
+                            Failed
+                        </span>
+                        }
+                        <p css={tw`break-all truncate`}>
+                            {backup.name}
+                        </p>
+                        {(backup.completedAt && backup.isSuccessful) &&
+                        <span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
+                        }
                     </div>
-                    {(backup.completedAt && backup.isSuccessful) &&
-                    <span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
-                    }
-                </p>
-                <p css={tw`text-xs text-neutral-400 font-mono hidden md:block`}>
-                    {backup.uuid}
-                </p>
+                    <p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>
+                        {backup.uuid}
+                    </p>
+                </div>
             </div>
-            <div css={tw`ml-8 text-center`}>
+            <div css={tw`flex-1 md:flex-none md:w-48 mt-4 md:mt-0 md:ml-8 md:text-center`}>
                 <p
                     title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
                     css={tw`text-sm`}
@@ -76,7 +78,7 @@ export default ({ backup, className }: Props) => {
                 <p css={tw`text-2xs text-neutral-500 uppercase mt-1`}>Created</p>
             </div>
             <Can action={'backup.download'}>
-                <div css={tw`ml-6`} style={{ marginRight: '-0.5rem' }}>
+                <div css={tw`mt-4 md:mt-0 ml-6`} style={{ marginRight: '-0.5rem' }}>
                     {!backup.completedAt ?
                         <div css={tw`p-2 invisible`}>
                             <FontAwesomeIcon icon={faEllipsisH}/>

resources/scripts/components/server/backups/CreateBackupButton.tsx

@@ -94,7 +94,7 @@ export default () => {
                 <ModalContent appear visible={visible} onDismissed={() => setVisible(false)}/>
             </Formik>
             }
-            <Button onClick={() => setVisible(true)}>
+            <Button css={tw`w-full sm:w-auto`} onClick={() => setVisible(true)}>
                 Create backup
             </Button>
         </>

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -38,13 +38,13 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
 
     return (
         (!canReadContents || (file.isFile && !file.isEditable())) ?
-            <div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default`}>
+            <div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
                 {children}
             </div>
             :
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
-                css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
+                css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
                 onClick={onRowClick}
             >
                 {children}
@@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
                     <FontAwesomeIcon icon={faFolder}/>
                 }
             </div>
-            <div css={tw`flex-1 break-all`}>
+            <div css={tw`flex-1 break-all truncate`}>
                 {file.name}
             </div>
             {file.isFile &&