Improve error handling

app/soapbox/actions/alerts.js

@@ -34,7 +34,7 @@ export function showAlert(title = messages.unexpectedTitle, message = messages.u
 }
 
 export function showAlertForError(error) {
-  return (dispatch, getState) => {
+  return (dispatch, _getState) => {
     if (error.response) {
       const { data, status, statusText } = error.response;
 
@@ -47,14 +47,17 @@ export function showAlertForError(error) {
         return dispatch(noOp);
       }
 
-      let message = statusText;
+      if (status === 413) {
-      const title = `${status}`;
+        return dispatch(showAlert('', 'File exceeds the file size limit', 'error'));
+      }
+
+      let message = statusText || status;
 
       if (data.error) {
         message = data.error;
       }
 
-      return dispatch(showAlert(title, message, 'error'));
+      return dispatch(showAlert('', message, 'error'));
     } else {
       console.error(error);
       return dispatch(showAlert(undefined, undefined, 'error'));

app/soapbox/components/modal_root.js

@@ -203,7 +203,7 @@ class ModalRoot extends React.PureComponent {
       <div
         ref={this.setRef}
         className={classNames({
-          'fixed top-0 left-0 z-1000 w-full h-full overflow-x-hidden overflow-y-auto': true,
+          'fixed top-0 left-0 z-[100] w-full h-full overflow-x-hidden overflow-y-auto': true,
           'pointer-events-none': !visible,
         })}
         style={{ opacity: revealed ? 1 : 0 }}

app/styles/components/snackbar.scss

@@ -1,5 +1,5 @@
 .notification-list {
-  @apply w-full flex flex-col items-center space-y-2 sm:items-end;
+  @apply w-full flex flex-col items-center space-y-2 sm:items-end z-[1001] relative;
 }
 
 .notification-bar {