feat(revisions): remove paddings for a smoother display

apps/client/src/stylesheets/style.css

@@ -961,15 +961,19 @@ table.promoted-attributes-in-tooltip th {
     background-color: var(--active-item-background-color);
 }
 
-.help-button {
+.help-button,
+.custom-title-bar-button {
     float: inline-end;
     background: none;
     font-weight: 900;
-    color: orange;
     border: 0;
     cursor: pointer;
 }
 
+.help-button {
+    color: orange;
+}
+
 .multiplicity {
     font-size: 1.3em;
 }
@@ -1148,7 +1152,8 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     padding: 0.5rem 1rem 0.5rem 1rem !important; /* make modal header padding slightly smaller */
 }
 
-.modal-header .help-button {
+.modal-header .help-button,
+.modal-header .custom-title-bar-button {
     padding: 6px;
     margin: 0 12px;
 }

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

@@ -18,7 +18,6 @@ body.mobile .revisions-dialog {
     .modal-body {
         height: fit-content !important;
         flex-direction: column;
-        padding: 0;
     }
 
     .modal-footer {
@@ -63,6 +62,10 @@ body.mobile .revisions-dialog {
 }
 
 .revisions-dialog {
+    .modal-body {
+        padding: 0;
+    }
+
     .revision-toolbar {
         display: flex;
         align-items: center;
@@ -94,6 +97,15 @@ body.mobile .revisions-dialog {
         opacity: 0.6;
     }
 
+    .revision-content-wrapper {
+        flex-grow: 1;
+        margin-inline: 20px;
+        display: flex;
+        flex-direction: column;
+        max-width: calc(100% - 150px);
+        min-width: 0;
+    }
+
     .revision-toolbar-separator {
         width: 1px;
         height: 1.2em;

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

@@ -101,14 +101,7 @@ export default function RevisionsDialog() {
                 currentRevision={currentRevision}
             />
 
-            <div className="revision-content-wrapper" style={{
-                flexGrow: "1",
-                marginInlineStart: "20px",
-                display: "flex",
-                flexDirection: "column",
-                maxWidth: "calc(100% - 150px)",
-                minWidth: 0
-            }}>
+            <div className="revision-content-wrapper">
                 <RevisionPreview
                     noteContent={noteContent}
                     revisionItem={currentRevision}
@@ -150,8 +143,9 @@ function RevisionsMenu({ note, onRevisionSaved, onAllDeleted, hasRevisions }: {
         <Dropdown
             text={<span className="bx bx-dots-horizontal-rounded" />}
             hideToggleArrow
-            iconAction
-            title={t("revisions.menu_tooltip")}
+            buttonClassName="custom-title-bar-button"
+            noSelectButtonStyle
+            buttonProps={{ title: t("revisions.menu_tooltip") }}
         >
             <FormListItem
                 icon="bx bx-save"