improve PageRevisionTable

apps/app/src/client/components/PageHistory/PageRevisionTable.tsx

@@ -44,8 +44,8 @@ export const PageRevisionTable = (
 
   const { data, size, error, setSize, isValidating } = swrInifiniteResponse;
 
-  const revisions = data && data[0].revisions;
-  const oldestRevision = revisions && revisions[revisions.length - 1];
+  const revisions = data?.[0].revisions;
+  const oldestRevision = revisions?.[revisions.length - 1];
 
   // First load
   const isLoadingInitialData = !data && !error;
@@ -166,34 +166,30 @@ export const PageRevisionTable = (
           </div>
         </td>
         <td className="col-1">
-          {(hasDiff || revisionId === sourceRevision?._id) && (
-            <div className="form-check form-check-inline me-0">
-              <input
-                type="radio"
-                className="form-check-input"
-                id={`compareSource-${revisionId}`}
-                name="compareSource"
-                value={revisionId}
-                checked={revisionId === sourceRevision?._id}
-                onChange={() => setSourceRevision(revision)}
-              />
-            </div>
-          )}
+          <div className="form-check form-check-inline me-0">
+            <input
+              type="radio"
+              className="form-check-input"
+              id={`compareSource-${revisionId}`}
+              name="compareSource"
+              value={revisionId}
+              checked={revisionId === sourceRevision?._id}
+              onChange={() => setSourceRevision(revision)}
+            />
+          </div>
         </td>
         <td className="col-2">
-          {(hasDiff || revisionId === targetRevision?._id) && (
-            <div className="form-check form-check-inline me-0">
-              <input
-                type="radio"
-                className="form-check-input"
-                id={`compareTarget-${revisionId}`}
-                name="compareTarget"
-                value={revisionId}
-                checked={revisionId === targetRevision?._id}
-                onChange={() => setTargetRevision(revision)}
-              />
-            </div>
-          )}
+          <div className="form-check form-check-inline me-0">
+            <input
+              type="radio"
+              className="form-check-input"
+              id={`compareTarget-${revisionId}`}
+              name="compareTarget"
+              value={revisionId}
+              checked={revisionId === targetRevision?._id}
+              onChange={() => setTargetRevision(revision)}
+            />
+          </div>
         </td>
       </tr>
     );

apps/app/src/client/components/PageHistory/Revision.tsx

@@ -45,13 +45,18 @@ export const Revision = (props: RevisionProps): JSX.Element => {
     return (
       <div
         className={`${styles['revision-history-main']} ${styles['revision-history-main-nodiff']}
-        revision-history-main revision-history-main-nodiff my-1 d-flex align-items-center`}
+        revision-history-main revision-history-main-nodiff my-1 flex-grow-1 d-flex`}
       >
-        <div className="picture-container">{pic}</div>
-        <div className="ms-3">
-          <span className="text-muted small">
-            <UserDate dateTime={revision.createdAt} /> {t('No diff')}
-          </span>
+        <div className="d-flex align-items-center">
+          <div className="picture-container">{pic}</div>
+          <div className="ms-2">
+            <span className="text-muted small">
+              <UserDate dateTime={revision.createdAt} />
+            </span>
+          </div>
+        </div>
+        <div className="flex-grow-1 text-center">
+          <span className="text-muted small">{t('No diff')}</span>
         </div>
       </div>
     );
@@ -75,7 +80,7 @@ export const Revision = (props: RevisionProps): JSX.Element => {
         <div className="ms-2">
           <div className="revision-history-author mb-1">
             <strong>
-              <Username user={author}></Username>
+              <Username user={author} />
             </strong>
             {isLatestRevision && (
               <span className="badge bg-info ms-2">{t('Latest')}</span>