refactor(ui): redesign VersionTimeline UI (#7162)

# Description of Changes I felt the old VersionTimeline was a bit too crowded/not very "good" looking so i had a crack at redesigning it. Mainly aimed for: - less info - less crowding - more spacing ### New <img width="884" height="1172" alt="image" src="https://github.com/user-attachments/assets/070eab35-80b8-408d-9917-b111c433ae4f" /> ### Old <img width="882" height="770" alt="image" src="https://github.com/user-attachments/assets/a074ba2e-79e3-4a8d-9491-ad3a8c432b98" />  --- ## Checklist ### General - [X] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [X] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [X] I have performed a self-review of my own code - [X] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [X] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [X] I have run `task check` to verify linters, typechecks, and tests pass - [X] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing) for more details.
2026-09-02 21:03:34 +03:00 · 2026-08-07 08:52:13 +00:00
parent 2cf6db99ce
commit fd1c955648
4 changed files with 256 additions and 212 deletions
@@ -3977,6 +3977,7 @@ refresh = "Refresh from server"
 remove = "Delete"
 removeVersion = "Remove this version"
 rename = "Rename"
+renamed = "Renamed"
 renameFolder = "Rename folder"
 resizeFolderTree = "Resize folder tree (arrow keys, Shift for bigger steps; double-click to auto-fit)"
 save = "Save"
@@ -4079,9 +4080,7 @@ count = "Files"
 folder = "Folder"
 labels = "Labels"
 modified = "Modified"
-name = "Name"
 size = "Size"
-toolHistoryAtVersion = "Cumulative tool chain"
 totalSize = "Total size"
 type = "Type"
 versionHistory = "Version journey"
@@ -956,178 +956,204 @@
   like a commit graph; clicking a row's summary toggles its expanded
   detail (cumulative tool chain, full meta). Long chains (> 6) collapse
   the middle behind a "Show N earlier versions" button. */
+/* Version Timeline styling */
 .files-page-details-version-timeline {
  display: flex;
  flex-direction: column;
-  gap: 0.4rem;
-  padding: 0.55rem 0.7rem 0.7rem;
-  background: var(--c-surface);
-  border: 1px solid var(--c-border-subtle);
-  border-radius: 0.5rem;
+  gap: 0.6rem;
+  padding: 0.5rem 0;
+  background: transparent;
 }
+
 .files-page-details-version-timeline-label {
  display: flex;
  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.72rem;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-subtle);
+  margin-bottom: 0.85rem;
 }
+
 .files-page-details-version-timeline-count {
  margin-left: auto;
  font-weight: 600;
-  color: var(--c-text-muted, var(--c-text-subtle));
+  color: var(--c-primary);
  text-transform: none;
  letter-spacing: 0;
 }
+
 .files-page-details-version-timeline-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 1.1rem 0 0 0 !important;
  display: flex;
  flex-direction: column;
+  gap: 1.25rem;
 }
+
 .files-page-details-version-timeline-row,
 .files-page-details-version-timeline-ellipsis {
  display: flex;
-  gap: 0.6rem;
-  padding: 0.15rem 0;
+  gap: 0.85rem;
+  padding: 0;
  position: relative;
+  list-style: none !important;
 }
+
+.files-page-details-version-timeline-row::before,
+.files-page-details-version-timeline-ellipsis::before {
+  content: none !important;
+}
+
 .files-page-details-version-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
-  width: 0.8rem;
-  padding-top: 0.45rem;
+  width: 1rem;
+  padding-top: 0.85rem;
 }
+
 .files-page-details-version-timeline-rail-dot {
-  width: 0.55rem;
-  height: 0.55rem;
+  width: 0.65rem;
+  height: 0.65rem;
  border-radius: 50%;
  background: var(--c-bg-raised);
  border: 2px solid var(--c-border-strong, var(--c-border-subtle));
-  z-index: 1;
+  z-index: 2;
  flex-shrink: 0;
+  transition: all 0.2s ease;
 }
+
 .files-page-details-version-timeline-rail-dot.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 30%, transparent);
 }
+
 .files-page-details-version-timeline-rail-dot.is-ellipsis {
-  width: 0.35rem;
-  height: 0.35rem;
+  width: 0.4rem;
+  height: 0.4rem;
  background: var(--c-text-subtle);
  border-color: transparent;
 }
+
 .files-page-details-version-timeline-rail-line {
  width: 2px;
  flex: 1;
  background: var(--c-border-subtle);
-  min-height: 0.6rem;
-  margin-top: 2px;
+  min-height: 1.25rem;
+  margin-top: 6px;
 }
+
 .files-page-details-version-timeline-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
-  gap: 0.2rem;
-  padding: 0.25rem 0.3rem 0.4rem;
-  border-radius: 0.35rem;
-  transition: background-color 0.12s ease;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  border-radius: 0.65rem;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border-subtle);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
+
+.files-page-details-version-timeline-body:hover {
+  border-color: var(--c-border-strong, var(--c-border-subtle));
+}
+
 .files-page-details-version-timeline-row.is-active
  .files-page-details-version-timeline-body {
-  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
+  border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
+  background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface));
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-primary) 12%, transparent);
 }
-.files-page-details-version-timeline-summary {
+
+.files-page-details-version-timeline-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.files-page-details-version-timeline-tool-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--c-text);
+}
+
+.files-page-details-version-timeline-card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-top: 0.1rem;
+}
+
+.files-page-details-version-timeline-expand-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
-  margin: 0;
+  cursor: pointer;
  display: flex;
  align-items: center;
-  gap: 0.4rem;
-  cursor: pointer;
-  text-align: left;
-  color: inherit;
-  font: inherit;
 }
-.files-page-details-version-timeline-summary:hover
-  .files-page-details-version-timeline-chevron {
+
+.files-page-details-version-timeline-expand-btn:hover span {
  color: var(--c-text);
 }
-.files-page-details-version-timeline-delta {
-  font-size: 0.82rem;
-  color: var(--c-text);
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-.files-page-details-version-timeline-delta.is-origin {
-  font-weight: 400;
-  color: var(--c-text-subtle);
-  font-style: italic;
-}
-.files-page-details-version-timeline-delta-plus {
-  color: var(--c-primary);
-  font-weight: 700;
-}
-.files-page-details-version-timeline-spacer {
-  flex: 1;
-}
+
 .files-page-details-version-timeline-chevron {
  color: var(--c-text-subtle);
  transition: transform 0.15s ease;
 }
+
 .files-page-details-version-timeline-chevron.is-expanded {
  transform: rotate(180deg);
-  color: var(--c-text);
-}
-.files-page-details-version-timeline-meta-line {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.7rem;
-  color: var(--c-text-subtle);
+  color: var(--c-primary);
 }
+
 .files-page-details-version-timeline-expanded {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
-  margin-top: 0.45rem;
+  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--c-border-subtle);
 }
+
 .files-page-details-version-timeline-toolchain {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
 }
+
 .files-page-details-version-timeline-toolchain-label {
  font-size: 0.65rem;
  color: var(--c-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
 }
+
 .files-page-details-version-timeline-ellipsis-btn,
 .files-page-details-version-timeline-collapse-btn {
  appearance: none;
  background: none;
  border: 1px dashed var(--c-border-subtle);
-  border-radius: 0.3rem;
-  padding: 0.25rem 0.5rem;
+  border-radius: 0.4rem;
+  padding: 0.35rem 0.7rem;
  margin: 0.1rem 0;
-  font-size: 0.72rem;
+  font-size: 0.75rem;
  color: var(--c-text-subtle);
  cursor: pointer;
  text-align: left;
@@ -1135,11 +1161,13 @@
    border-color 0.12s ease,
    color 0.12s ease;
 }
+
 .files-page-details-version-timeline-ellipsis-btn:hover,
 .files-page-details-version-timeline-collapse-btn:hover {
  color: var(--c-text);
-  border-color: var(--c-border-strong, var(--c-text-subtle));
+  border-color: var(--c-primary);
 }
+
 .files-page-details-version-timeline-collapse-btn {
  align-self: flex-start;
  margin-top: 0.2rem;
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Center, Loader, Modal, Text } from "@mantine/core";
+import HistoryIcon from "@mui/icons-material/History";
+import { Center, Group, Loader, Modal, Text } from "@mantine/core";

 import type { FileId } from "@app/types/file";
 import type { StirlingFileStub } from "@app/types/fileContext";
@@ -99,7 +100,17 @@ export function VersionHistoryModal({
      onClose={onClose}
      centered
      size="md"
-      title={t("filesPage.field.versionHistory", "Version journey")}
+      title={
+        <Group gap="xs" align="center">
+          <HistoryIcon
+            fontSize="small"
+            style={{ color: "var(--c-accent-fg, var(--c-primary))" }}
+          />
+          <Text fw={600} size="md" c="var(--c-text)">
+            {t("filesPage.field.versionHistory", "Version journey")}
+          </Text>
+        </Group>
+      }
    >
      {loading ? (
        <Center py="lg">
@@ -111,6 +122,7 @@ export function VersionHistoryModal({
          currentId={file.id}
          onAddToWorkspace={handleAddToWorkspace}
          onRemove={handleRemove}
+          hideHeader
        />
      ) : (
        <Text size="sm" c="dimmed" py="sm">
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Badge, Menu } from "@mantine/core";
+import { Badge, Group, Menu, Text } from "@mantine/core";
 import { Button } from "@app/ui/Button";
 import { ActionIcon } from "@app/ui/ActionIcon";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -8,16 +8,14 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
 import HistoryIcon from "@mui/icons-material/History";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";

 import { FileId, ToolOperation } from "@app/types/file";
 import { ToolId } from "@app/types/toolId";
 import { StirlingFileStub } from "@app/types/fileContext";
 import { formatFileSize, getFileDate } from "@app/utils/fileUtils";
 import { downloadFileFromStorage } from "@app/utils/downloadUtils";
-import ToolChain from "@app/components/shared/ToolChain";

-/** Small label/value row; shared with FileDetailsPanel. */
+/** Small label/value row with crisp flex alignment and colon separation. */
 export function DetailField({
  label,
  value,
@@ -26,9 +24,31 @@ export function DetailField({
  value: string;
 }) {
  return (
-    <div className="files-page-details-field">
-      <span className="files-page-details-field-label">{label}</span>
-      <span className="files-page-details-field-value">{value}</span>
+    <div
+      className="files-page-details-field"
+      style={{
+        display: "flex",
+        gap: "0.5rem",
+        alignItems: "baseline",
+        wordBreak: "break-all",
+      }}
+    >
+      <span
+        className="files-page-details-field-label"
+        style={{
+          fontWeight: 500,
+          color: "var(--c-text-subtle)",
+          flexShrink: 0,
+        }}
+      >
+        {label}:
+      </span>
+      <span
+        className="files-page-details-field-value"
+        style={{ fontWeight: 600, color: "var(--c-text)" }}
+      >
+        {value}
+      </span>
    </div>
  );
 }
@@ -60,7 +80,7 @@ export interface VersionTimelineProps {
  hideHeader?: boolean;
 }

-/** Version timeline with per-row tool deltas and collapse-when-long. */
+/** Clean, spacious version timeline with minimal clutter. */
 export function VersionTimeline({
  chain,
  currentId,
@@ -69,7 +89,6 @@ export function VersionTimeline({
  hideHeader = false,
 }: VersionTimelineProps) {
  const { t } = useTranslation();
-  const [expandedIds, setExpandedIds] = useState<Set<FileId>>(new Set());
  const [showAllCollapsed, setShowAllCollapsed] = useState(false);

  // Newest-first ordering.
@@ -113,15 +132,6 @@ export function VersionTimeline({
    return [...head, { kind: "ellipsis", hidden }, ...tail];
  }, [collapsible, showAllCollapsed, ordered]);

-  const toggleExpand = (id: FileId) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
  return (
    <div className="files-page-details-version-timeline">
      {!hideHeader && (
@@ -135,7 +145,10 @@ export function VersionTimeline({
          </span>
        </div>
      )}
-      <ol className="files-page-details-version-timeline-list">
+      <ul
+        className="files-page-details-version-timeline-list"
+        style={{ listStyle: "none", padding: 0, margin: 0 }}
+      >
        {rows.map((row, idx) => {
          const isLast = idx === rows.length - 1;
          if (row.kind === "ellipsis") {
@@ -143,6 +156,7 @@ export function VersionTimeline({
              <li
                key="ellipsis"
                className="files-page-details-version-timeline-ellipsis"
+                style={{ listStyle: "none" }}
              >
                <div className="files-page-details-version-timeline-rail">
                  <span className="files-page-details-version-timeline-rail-dot is-ellipsis" />
@@ -152,7 +166,7 @@ export function VersionTimeline({
                </div>
                <Button
                  variant="tertiary"
-                  className="files-page-details-version-timeline-ellipsis-btn"
+                  size="sm"
                  onClick={() => setShowAllCollapsed(true)}
                >
                  {t(
@@ -166,15 +180,18 @@ export function VersionTimeline({
          }
          const v = row.version;
          const isActive = v.id === currentId;
-          const isExpanded = expandedIds.has(v.id);
          const prior = byVersionNumber.get((v.versionNumber ?? 1) - 1) ?? null;
          const delta = deltaToolFor(v, prior);
+          const isOriginal = (v.versionNumber ?? 1) === 1;
+          const nameChanged = prior ? prior.name !== v.name : false;
+
          return (
            <li
              key={v.id}
              className={`files-page-details-version-timeline-row${
                isActive ? " is-active" : ""
              }`}
+              style={{ listStyle: "none" }}
            >
              <div className="files-page-details-version-timeline-rail">
                <span
@@ -187,131 +204,119 @@ export function VersionTimeline({
                )}
              </div>
              <div className="files-page-details-version-timeline-body">
-                <Button
-                  variant="tertiary"
-                  className="files-page-details-version-timeline-summary"
-                  onClick={() => toggleExpand(v.id)}
-                  aria-expanded={isExpanded}
-                  leftSection={
-                    <Badge
-                      size="xs"
-                      variant={isActive ? "filled" : "outline"}
-                      color="blue"
-                    >
+                {/* Header row: Version Badge, Action Title + Menu */}
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "0.75rem",
+                    width: "100%",
+                  }}
+                >
+                  <Group
+                    gap="sm"
+                    align="center"
+                    style={{ flex: 1, minWidth: 0, flexWrap: "nowrap" }}
+                  >
+                    <Badge size="xs" variant={isActive ? "filled" : "light"}>
                      v{v.versionNumber ?? 1}
                    </Badge>
-                  }
-                  rightSection={
-                    <KeyboardArrowDownIcon
-                      className={`files-page-details-version-timeline-chevron${
-                        isExpanded ? " is-expanded" : ""
-                      }`}
-                      fontSize="small"
-                    />
-                  }
-                >
-                  {delta ? (
-                    <span className="files-page-details-version-timeline-delta">
-                      <ToolLabel toolId={delta.toolId} />
-                    </span>
-                  ) : (
-                    <span className="files-page-details-version-timeline-delta is-origin">
-                      {t("filesPage.versionOrigin", "Original upload")}
-                    </span>
-                  )}
-                </Button>
-                <div className="files-page-details-version-timeline-meta-line">
-                  <span>{formatFileSize(v.size)}</span>
-                  {v.lastModified ? (
-                    <>
-                      <span>·</span>
-                      <span>
-                        {getFileDate({ lastModified: v.lastModified })}
-                      </span>
-                    </>
-                  ) : null}
-                  {/* Kebab on every row - the original/active version also
-                      needs download + open-in-workspace. */}
-                  <span className="files-page-details-version-timeline-spacer" />
-                  <Menu position="bottom-end" withinPortal shadow="md">
-                    <Menu.Target>
-                      <ActionIcon
-                        variant="tertiary"
-                        size="sm"
-                        aria-label={t(
-                          "filesPage.versionActions",
-                          "Version actions",
-                        )}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <MoreVertIcon fontSize="small" />
-                      </ActionIcon>
-                    </Menu.Target>
-                    <Menu.Dropdown>
-                      <Menu.Item
-                        leftSection={<OpenInNewIcon fontSize="small" />}
-                        onClick={() => onAddToWorkspace([v.id])}
-                      >
-                        {t(
-                          "filesPage.openVersionInWorkspace",
-                          "Open in workspace",
-                        )}
-                      </Menu.Item>
-                      <Menu.Item
-                        leftSection={<DownloadIcon fontSize="small" />}
-                        onClick={() => {
-                          void downloadFileFromStorage(v);
-                        }}
-                      >
-                        {t(
-                          "filesPage.downloadVersion",
-                          "Download this version",
-                        )}
-                      </Menu.Item>
-                      <Menu.Divider />
-                      <Menu.Item
-                        color="red"
-                        leftSection={<DeleteIcon fontSize="small" />}
-                        onClick={() => onRemove([v.id])}
-                      >
-                        {t("filesPage.removeVersion", "Remove this version")}
-                      </Menu.Item>
-                    </Menu.Dropdown>
-                  </Menu>
-                </div>
-                {isExpanded && (
-                  // Filename + full cumulative tool chain.
-                  <div className="files-page-details-version-timeline-expanded">
-                    <DetailField
-                      label={t("filesPage.field.name", "Name")}
-                      value={v.name}
-                    />
-                    {v.toolHistory && v.toolHistory.length > 0 && (
-                      <div className="files-page-details-version-timeline-toolchain">
-                        <span className="files-page-details-version-timeline-toolchain-label">
-                          {t(
-                            "filesPage.field.toolHistoryAtVersion",
-                            "Cumulative tool chain",
+                    <Text
+                      fw={600}
+                      size="sm"
+                      truncate
+                      style={{ color: "var(--c-text)" }}
+                    >
+                      {delta ? (
+                        <ToolLabel toolId={delta.toolId} />
+                      ) : (
+                        t("filesPage.versionOrigin", "Original upload")
+                      )}
+                    </Text>
+                  </Group>
+
+                  {!isActive && (
+                    <Menu position="bottom-end" withinPortal shadow="md">
+                      <Menu.Target>
+                        <ActionIcon
+                          variant="tertiary"
+                          size="sm"
+                          aria-label={t(
+                            "filesPage.versionActions",
+                            "Version actions",
                          )}
-                        </span>
-                        <ToolChain
-                          toolChain={v.toolHistory}
-                          displayStyle="badges"
-                          size="xs"
-                        />
-                      </div>
-                    )}
-                  </div>
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <MoreVertIcon fontSize="small" />
+                        </ActionIcon>
+                      </Menu.Target>
+                      <Menu.Dropdown>
+                        <Menu.Item
+                          leftSection={<OpenInNewIcon fontSize="small" />}
+                          onClick={() => onAddToWorkspace([v.id])}
+                        >
+                          {t(
+                            "filesPage.openVersionInWorkspace",
+                            "Open in workspace",
+                          )}
+                        </Menu.Item>
+                        <Menu.Item
+                          leftSection={<DownloadIcon fontSize="small" />}
+                          onClick={() => {
+                            void downloadFileFromStorage(v);
+                          }}
+                        >
+                          {t(
+                            "filesPage.downloadVersion",
+                            "Download this version",
+                          )}
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item
+                          color="red"
+                          leftSection={<DeleteIcon fontSize="small" />}
+                          onClick={() => onRemove([v.id])}
+                        >
+                          {t("filesPage.removeVersion", "Remove this version")}
+                        </Menu.Item>
+                      </Menu.Dropdown>
+                    </Menu>
+                  )}
+                </div>
+
+                {/* Quiet Meta Line: File Size · Date */}
+                <Text size="xs" c="dimmed" style={{ marginTop: "0.15rem" }}>
+                  {formatFileSize(v.size)}
+                  {v.lastModified && (
+                    <> · {getFileDate({ lastModified: v.lastModified })}</>
+                  )}
+                </Text>
+
+                {/* Show filename ONLY if original upload or if name changed */}
+                {(isOriginal || nameChanged) && (
+                  <Text
+                    size="xs"
+                    c="dimmed"
+                    style={{ wordBreak: "break-all", marginTop: "0.2rem" }}
+                  >
+                    {nameChanged
+                      ? `${t("filesPage.renamed", "Renamed")}: `
+                      : `${t("filesPage.file", "File")}: `}
+                    <span style={{ color: "var(--c-text)", fontWeight: 500 }}>
+                      {v.name}
+                    </span>
+                  </Text>
                )}
              </div>
            </li>
          );
        })}
-      </ol>
+      </ul>
      {collapsible && showAllCollapsed && (
        <Button
          variant="tertiary"
-          className="files-page-details-version-timeline-collapse-btn"
+          size="sm"
          onClick={() => setShowAllCollapsed(false)}
        >
          {t("filesPage.versionCollapse", "Collapse middle versions")}