Fix long lines in web app by adding horizontal scroll, closes #1363

web/src/components/Notifications.jsx

@@ -303,7 +303,7 @@ const NotificationItem = (props) => {
             {formatTitle(notification)}
           </Typography>
         )}
-        <Typography variant="body1" sx={{ whiteSpace: "pre-line" }}>
+        <Typography variant="body1" sx={{ whiteSpace: "pre-line", overflowX: "auto" }}>
           <NotificationBody notification={notification} />
           {maybeActionErrors(notification)}
         </Typography>

web/src/components/Preferences.jsx

@@ -438,6 +438,14 @@ const UserDialog = (props) => {
     }
     return validUrl(baseUrl) && !baseUrlExists && username.length > 0 && password.length > 0;
   })();
+  const baseUrlHelperText = (() => {
+    if (baseUrl.length > 0 && !baseUrlValid) {
+      return t("prefs_users_dialog_base_url_invalid");
+    } else if (baseUrlExists) {
+      return t("prefs_users_dialog_base_url_exists");
+    }
+    return "";
+  })();
   const handleSubmit = async () => {
     props.onSubmit({
       baseUrl,
@@ -469,13 +477,7 @@ const UserDialog = (props) => {
             fullWidth
             variant="standard"
             error={baseUrlError}
-            helperText={
-              baseUrl.length > 0 && !baseUrlValid
-                ? t("prefs_users_dialog_base_url_invalid")
-                : baseUrlExists
-                ? t("prefs_users_dialog_base_url_exists")
-                : ""
-            }
+            helperText={baseUrlHelperText}
           />
         )}
         <TextField