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

docs/releases.md

@@ -1669,9 +1669,10 @@ and the [ntfy Android app](https://github.com/binwiederhier/ntfy-android/release
 
 **Bug fixes + maintenance:**
 
-* Refactor: Use `slices.Contains` from Go 1.21 stdlib to simplify code ([#1406](https://github.com/binwiederhier/ntfy/pull/1406), thanks to [@tanhuaan](https://github.com/tanhuaan))
 * Web: Fix Markdown message line height to match plain text (1.5 instead of 1.2) ([#1139](https://github.com/binwiederhier/ntfy/issues/1139), thanks to [@etfz](https://github.com/etfz))
+* Web: Fix long lines (e.g. JSON) being truncated by adding horizontal scroll ([#1363](https://github.com/binwiederhier/ntfy/issues/1363), thanks to [@v3DJG6GL](https://github.com/v3DJG6GL))
 * Web: Use full URL in curl example on empty topic pages ([#1435](https://github.com/binwiederhier/ntfy/issues/1435), [#1535](https://github.com/binwiederhier/ntfy/pull/1535), thanks to [@elmatadoor](https://github.com/elmatadoor) for reporting and [@jjasghar](https://github.com/jjasghar) for the PR)
 * Web: Add validation feedback for service URL when adding user ([#1566](https://github.com/binwiederhier/ntfy/issues/1566), thanks to [@jermanuts](https://github.com/jermanuts))
+* Refactor: Use `slices.Contains` from stdlib to simplify code ([#1406](https://github.com/binwiederhier/ntfy/pull/1406), thanks to [@tanhuaan](https://github.com/tanhuaan))
 * Docs: Remove obsolete `version` field from docker-compose examples ([#1333](https://github.com/binwiederhier/ntfy/issues/1333), thanks to [@seals187](https://github.com/seals187) for reporting and [@cyb3rko](https://github.com/cyb3rko) for fixing)
 * Docs: Fix Kustomize config in installation docs ([#1367](https://github.com/binwiederhier/ntfy/issues/1367), thanks to [@toby-griffiths](https://github.com/toby-griffiths))

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