Merge pull request #6263 from weseek/feat/gw7836-truncate-recent-changes-long-path-on-s-size

feat:  Truncate long path when recent changes is in S size

packages/app/src/components/Sidebar/RecentChanges.tsx

@@ -107,7 +107,7 @@ function SmallPageItem({ page }) {
         <UserPicture user={page.lastUpdateUser} size="md" noTooltip />
         <div className="flex-grow-1 ml-2">
           { !dPagePath.isRoot && <FormerLink /> }
-          <h5 className="my-0">
+          <h5 className="my-0 text-truncate">
             <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
             {locked}
           </h5>

packages/app/src/styles/_recent-changes.scss

@@ -41,5 +41,14 @@
     .icon-lock {
       font-size: 14px;
     }
+
+    // For truncate-text
+    .flex-grow-1 {
+      min-width: 0;
+    }
+
+    .truncate-text {
+      max-width: fit-content;
+    }
   }
 }