treeverse · prabhath004 · Nov 3, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/webui/package-lock.json b/webui/package-lock.json
diff --git a/webui/package.json b/webui/package.json
@@ -74,7 +74,7 @@
     "@types/lodash": "^4.14.202",
     "@types/mdast": "^3.0.10",
     "@types/mime-types": "^3.0.1",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.19.24",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@types/react-router-dom": "^5.3.3",

diff --git a/webui/src/lib/components/controls.jsx b/webui/src/lib/components/controls.jsx
@@ -546,3 +546,31 @@ export const SearchInput = ({searchPrefix, setSearchPrefix, placeholder}) => {
         </InputGroup>
     );
 };
+
+export const TruncatedText = ({ text, maxLength = 50, className = "", style = {} }) => {
+    const needsTruncation = text && text.length > maxLength;
+
+    const truncatedStyle = {
+        display: 'inline-block',
+        maxWidth: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        ...style
+    };
+
+    if (!needsTruncation) {
+        return <span className={className} style={style}>{text}</span>;
+    }
+
+    return (
+        <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip>{text}</Tooltip>}
+        >
+            <span className={className} style={truncatedStyle}>
+                {text}
+            </span>
+        </OverlayTrigger>
+    );
+};
diff --git a/webui/src/lib/components/repository/compareBranches.jsx b/webui/src/lib/components/repository/compareBranches.jsx
@@ -87,9 +87,25 @@ const BranchChangesList = (
     if (error) return <AlertError error={error}/>;
 
     const changesTreeMessage =
-        <p>
-            Showing changes between <strong>{reference.id}</strong> {""}
-            and <strong>{compareReference.id}</strong>
+        <p style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', margin: 0, minWidth: 0, maxWidth: '100%' }}>
+            <span style={{ flexShrink: 0 }}>Showing changes between</span>
+            <strong style={{
+                maxWidth: '200px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                minWidth: 0,
+                flexShrink: 1
+            }} title={reference.id}>{reference.id}</strong>
+            <span style={{ flexShrink: 0 }}>and</span>
+            <strong style={{
+                maxWidth: '200px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                minWidth: 0,
+                flexShrink: 1
+            }} title={compareReference.id}>{compareReference.id}</strong>
         </p>
 
     if (compareReference.id === reference.id) {

diff --git a/webui/src/lib/components/repository/compareBranchesActionBar.jsx b/webui/src/lib/components/repository/compareBranchesActionBar.jsx
@@ -100,7 +100,12 @@ const MergeButton = ({repo, onDone, source, dest, disabled = false}) => {
         <>
             <Modal show={mergeState.show} onHide={hide} size="lg">
                 <Modal.Header closeButton>
-                    <Modal.Title>Merge branch {source} into {dest}</Modal.Title>
+                    <Modal.Title style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', minWidth: 0 }}>
+                        <span style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>Merge branch</span>
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }} title={source}>{source}</span>
+                        <span style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>into</span>
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }} title={dest}>{dest}</span>
+                    </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <Form className="mb-2">

diff --git a/webui/src/lib/components/repository/tree.jsx b/webui/src/lib/components/repository/tree.jsx
@@ -478,15 +478,23 @@ const EntryRow = ({ config, repo, reference, path, entry, onDelete, showActions
   const params = { repoId: repo.id };
   const query = { ref: reference.id, path: entry.path };
 
+  const linkStyle = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    display: 'block',
+    maxWidth: '100%'
+  };
+
   let button;
   if (entry.path_type === "common_prefix") {
     button = (
-      <Link href={{ pathname: "/repositories/:repoId/objects", query, params }}>
+      <Link href={{ pathname: "/repositories/:repoId/objects", query, params }} style={linkStyle}>
         {buttonText}
       </Link>
     );
   } else if (entry.diff_type === "removed") {
-    button = <span>{buttonText}</span>;
+    button = <span style={linkStyle}>{buttonText}</span>;
   } else {
     const filePathQuery = {
       ref: query.ref,
@@ -499,6 +507,7 @@ const EntryRow = ({ config, repo, reference, path, entry, onDelete, showActions
           query: filePathQuery,
           params: params,
         }}
+        style={linkStyle}
       >
         {buttonText}
       </Link>
@@ -597,13 +606,19 @@ const EntryRow = ({ config, repo, reference, path, entry, onDelete, showActions
     <>
       <tr className={rowClass}>
         <td className="diff-indicator">{diffIndicator || ""}</td>
-        <td className="tree-path">
-          {entry.path_type === "common_prefix" ? (
-            <FileDirectoryIcon />
-          ) : (
-            <FileIcon />
-          )}{" "}
-          {button}
+        <td className="tree-path" title={buttonText}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', maxWidth: '100%', overflow: 'hidden' }}>
+            <span style={{ flexShrink: 0, marginRight: '4px' }}>
+              {entry.path_type === "common_prefix" ? (
+                <FileDirectoryIcon />
+              ) : (
+                <FileIcon />
+              )}
+            </span>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
+              {button}
+            </span>
+          </span>
         </td>
         <td className="tree-size">{size}</td>
         <td className="tree-modified">{modified}</td>
@@ -662,37 +677,57 @@ export const URINavigator = ({
     <div className="d-flex">
       <div className="lakefs-uri flex-grow-1">
         <div
-            title={displayedReference}
-            className="w-100 text-nowrap overflow-hidden text-truncate"
+            className="w-100"
+            style={{ display: 'flex', alignItems: 'center', minWidth: 0 }}
         >
           {relativeTo === "" ? (
               <>
-                <strong>lakefs://</strong>
+                <strong style={{ flexShrink: 0 }}>lakefs://</strong>
                 <Link
                     href={{
                       pathname: "/repositories/:repoId/objects",
                       params,
                       query: { ref: reference.id },
                     }}
+                    style={{ flexShrink: 0 }}
                 >
                   {repo.id}
                 </Link>
-                <strong>/</strong>
+                <strong style={{ flexShrink: 0 }}>/</strong>
                 <Link
                     href={{
                       pathname: "/repositories/:repoId/objects",
                       params,
                       query: { ref: reference.id },
                     }}
+                    style={{
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      minWidth: 0,
+                      maxWidth: '300px'
+                    }}
+                    title={reference.id}
                 >
                   {displayedReference}
                 </Link>
-                <strong>/</strong>
+                <strong style={{ flexShrink: 0 }}>/</strong>
               </>
           ) : (
               <>
-                <Link href={pathURLBuilder(params, { path: "" })}>{relativeTo}</Link>
-                <strong>/</strong>
+                <Link
+                    href={pathURLBuilder(params, { path: "" })}
+                    style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        minWidth: 0,
+                        maxWidth: '400px',
+                        flexShrink: 1
+                    }}
+                    title={relativeTo}
+                >{relativeTo}</Link>
+                <strong style={{ flexShrink: 0 }}>/</strong>
               </>
           )}
 
@@ -705,14 +740,30 @@ export const URINavigator = ({
             const query = { path, ref: reference.id };
             const edgeElement =
               isPathToFile && i === parts.length - 1 ? (
-                <span>{part.name}</span>
+                <span style={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  minWidth: 0
+                }} title={part.name}>{part.name}</span>
               ) : (
                 <>
-                  <Link href={pathURLBuilder(params, query)}>{part.name}</Link>
-                  <strong>{"/"}</strong>
+                  <Link
+                    href={pathURLBuilder(params, query)}
+                    style={{
+                      flexShrink: 0,
+                      maxWidth: '200px',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      display: 'inline-block'
+                    }}
+                    title={part.name}
+                  >{part.name}</Link>
+                  <strong style={{ flexShrink: 0 }}>{"/"}</strong>
                 </>
               );
-            return <span key={part.name}>{edgeElement}</span>;
+            return <span key={part.name} style={{ display: 'inline-flex', minWidth: 0 }}>{edgeElement}</span>;
           })}
         </div>
       </div>

diff --git a/webui/src/lib/components/repository/treeRows.jsx b/webui/src/lib/components/repository/treeRows.jsx
@@ -106,16 +106,30 @@ const TableRow = ({diffIndicator, depth, loading, showSummary, entry, getMore, r
                       showRevertConfirm, setShowRevertConfirm, pathSection, onRevert, dirExpanded, onExpand, ...rest}) => {
     return (<tr {...rest}>
             <td className="entry-type-indicator">{diffIndicator}</td>
-            <td className="tree-path">
-                        <span style={{marginLeft: (depth * 20) + "px"}}>
-                            {pathSection}
+            <td className="tree-path" title={entry.path}>
+                        <span style={{
+                            marginLeft: (depth * 20) + "px",
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            maxWidth: '100%',
+                            overflow: 'hidden'
+                        }}>
+                            <span style={{
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap'
+                            }}>
+                                {pathSection}
+                            </span>
                             {onExpand && <PrefixExpansionSection dirExpanded={dirExpanded} onClick={onExpand}/>}
-                            {loading ? <ClockIcon/> : ""}
                         </span>
             </td>
             <td className={"change-summary"}>{showSummary && <ChangeSummary prefix={entry.path} getMore={getMore}/>}</td>
             <td className={"change-entry-row-actions"}>
-                <ChangeRowActions actions={rowActions} />
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexDirection: 'row-reverse', justifyContent: 'flex-start' }}>
+                    <ChangeRowActions actions={rowActions} />
+                    {loading && <ClockIcon style={{ flexShrink: 0 }}/>}
+                </div>
                 <ConfirmationModal show={showRevertConfirm} onHide={setShowRevertConfirm}
                                    msg={`Are you sure you wish to revert "${entry.path}" (${entry.type})?`}
                                    onConfirm={() => onRevert(entry)}/>

diff --git a/webui/src/pages/repositories/repository/branches.jsx b/webui/src/pages/repositories/repository/branches.jsx
@@ -17,7 +17,7 @@ import {
     ActionGroup,
     ActionsBar, ClipboardButton,
     AlertError, LinkButton,
-    Loading, PrefixSearchWidget, RefreshButton
+    Loading, PrefixSearchWidget, RefreshButton, TruncatedText
 } from "../../../lib/components/controls";
 import {useRefs} from "../../../lib/hooks/repo";
 import {useAPIWithPagination} from "../../../lib/hooks/api";
@@ -43,7 +43,7 @@ const BranchWidget = ({ repo, branch, onDelete }) => {
     const isDefault = repo.default_branch === branch.id;
     let deleteMsg = (
         <>
-            Are you sure you wish to delete branch <strong>{branch.id}</strong> ?
+            Are you sure you wish to delete branch <strong title={branch.id}><TruncatedText text={branch.id} maxLength={50} /></strong> ?
         </>
     );
     if (branch.id === ImportBranchName) {
@@ -60,16 +60,21 @@ const BranchWidget = ({ repo, branch, onDelete }) => {
             <Row className="d-flex align-items-center justify-content-between">
                 <Col
                     title={branch.id}
-                    className="flex-grow-1 text-nowrap overflow-hidden text-truncate align-middle"
+                    className="flex-grow-1 align-middle"
+                    style={{minWidth: 0}}
                 >
                     <h6 className="mb-0">
-                        <Link href={{
-                            pathname: '/repositories/:repoId/objects',
-                            params: {repoId: repo.id},
-                            query: {ref: branch.id}
-                        }}>
-                            {branch.id}
-                        </Link>
+                        <span className="d-inline-block text-nowrap overflow-hidden text-truncate" style={{maxWidth: '100%', verticalAlign: 'middle'}}>
+                            <Link 
+                                href={{
+                                    pathname: '/repositories/:repoId/objects',
+                                    params: {repoId: repo.id},
+                                    query: {ref: branch.id}
+                                }}
+                            >
+                                {branch.id}
+                            </Link>
+                        </span>
 
                         {isDefault &&
                             <>