add explanation

src/components/rooms.js

@@ -22,6 +22,7 @@ import {
   useTranslate,
 } from "react-admin";
 import get from "lodash/get";
+import { makeStyles } from "@material-ui/core/styles";
 import { Tooltip, Typography, Chip } from "@material-ui/core";
 import FastForwardIcon from "@material-ui/icons/FastForward";
 import HttpsIcon from "@material-ui/icons/Https";
@@ -38,6 +39,13 @@ import {
   RoomDirectorySaveButton,
 } from "./RoomDirectory";
 
+const useStyles = makeStyles(theme => ({
+  helper_forward_extremities: {
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    margin: "0.5em",
+  },
+}));
+
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
@@ -109,6 +117,7 @@ const RoomShowActions = ({ basePath, data, resource }) => {
 };
 
 export const RoomShow = props => {
+  const classes = useStyles({ props });
   const translate = useTranslate();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
@@ -263,6 +272,9 @@ export const RoomShow = props => {
           icon={<FastForwardIcon />}
           path="forward_extremities"
         >
+          <div className={classes.helper_forward_extremities}>
+            {translate("resources.rooms.enums.unencrypted")}
+          </div>
           <ReferenceManyField
             reference="forward_extremities"
             target="room_id"

src/i18n/de.js

@@ -152,6 +152,10 @@ const de = {
         topic: "Thema",
         avatar: "Avatar",
       },
+      helper: {
+        forward_extremities:
+          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
+      },
       enums: {
         join_rules: {
           public: "Öffentlich",

src/i18n/en.js

@@ -150,6 +150,10 @@ const en = {
         topic: "Topic",
         avatar: "Avatar",
       },
+      helper: {
+        forward_extremities:
+          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
+      },
       enums: {
         join_rules: {
           public: "Public",