feat(revisions): improve title display

apps/client/src/stylesheets/style.css

@@ -1166,8 +1166,8 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     display: flex;
     flex-direction: column;
     border-right: 1px solid var(--main-border-color);
-    overflow: auto;
     flex-shrink: 0;
+    min-height: 0;
 }
 
 .modal-content-with-sidebar > .modal-main {

apps/client/src/widgets/dialogs/revisions.css

@@ -72,6 +72,27 @@ body.desktop .revisions-dialog {
         padding: 0;
     }
 
+    .modal-sidebar {
+        background-color: var(--card-background-color);
+    }
+
+    .modal-sidebar .dropdown-menu.static {
+        background-color: transparent !important;
+        border-radius: 0 !important;
+        padding-top: 0 !important;
+    }
+
+    .revision-sidebar-header {
+        padding: 0.75rem 1rem;
+        flex-shrink: 0;
+        text-align: center;
+
+        h5 {
+            margin: 0;
+            font-size: 1em;
+        }
+    }
+
     .revision-toolbar {
         display: flex;
         align-items: center;
@@ -124,11 +145,9 @@ body.desktop .revisions-dialog {
     }
 
     .revision-list {
-        flex-shrink: 0;
-
-        .dropdown-item + .dropdown-item {
-            border-top: 1px solid var(--main-border-color) !important;
-        }
+        flex: 1 1 0;
+        min-height: 0;
+        overflow: auto;
 
         .dropdown-item {
             min-height: 2.5em;

apps/client/src/widgets/dialogs/revisions.tsx

@@ -65,7 +65,7 @@ export default function RevisionsDialog() {
         <Modal
             className="revisions-dialog"
             size="xl"
-            title={t("revisions.note_revisions")}
+            title=""
             helpPageId="vZWERwf8U3nx"
             header={note && (
                 <RevisionsMenu
@@ -82,16 +82,21 @@ export default function RevisionsDialog() {
                 />
             )}
             sidebar={
-                <RevisionsList
-                    revisions={revisions ?? []}
-                    onSelect={(revisionId) => {
-                        const correspondingRevision = (revisions ?? []).find((r) => r.revisionId === revisionId);
-                        if (correspondingRevision) {
-                            setCurrentRevision(correspondingRevision);
-                        }
-                    }}
-                    currentRevision={currentRevision}
-                />
+                <>
+                    <div className="revision-sidebar-header">
+                        <h5>{t("revisions.note_revisions")}</h5>
+                    </div>
+                    <RevisionsList
+                        revisions={revisions ?? []}
+                        onSelect={(revisionId) => {
+                            const correspondingRevision = (revisions ?? []).find((r) => r.revisionId === revisionId);
+                            if (correspondingRevision) {
+                                setCurrentRevision(correspondingRevision);
+                            }
+                        }}
+                        currentRevision={currentRevision}
+                    />
+                </>
             }
             onHidden={() => {
                 setShown(false);