diff --git a/webui/package-lock.json b/webui/package-lock.json
index 796ef970ba1..41aad9cae36 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -62,7 +62,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",
@@ -3657,9 +3657,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "20.19.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.11.tgz",
-      "integrity": "sha512-uug3FEEGv0r+jrecvUUpbY8lLisvIjg6AAic6a2bSP5OEOLeJsDSnvhCDov7ipFFMXS3orMpzlmi0ZcuGkBbow==",
+      "version": "20.19.24",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
+      "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -20444,9 +20444,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "@types/node": {
-      "version": "20.19.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.11.tgz",
-      "integrity": "sha512-uug3FEEGv0r+jrecvUUpbY8lLisvIjg6AAic6a2bSP5OEOLeJsDSnvhCDov7ipFFMXS3orMpzlmi0ZcuGkBbow==",
+      "version": "20.19.24",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
+      "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
       "requires": {
         "undici-types": "~6.21.0"
       }
diff --git a/webui/package.json b/webui/package.json
index 70c9c8dd323..b95720c8463 100644
--- 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
index 300c05d262b..b019ae8049a 100644
--- 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
index 90a1aca9b66..81fee0832d4 100644
--- 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
index eb601a84520..b2292b9b0eb 100644
--- 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
index e1be629245a..eb9f2e67f19 100644
--- 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
index f295d194d05..c087549e49c 100644
--- 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
index f1771fff1cd..1b95bdfca16 100644
--- 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 &&
                             <>
diff --git a/webui/src/pages/repositories/repository/objects.jsx b/webui/src/pages/repositories/repository/objects.jsx
index 9545144ea8a..94312d6320d 100644
--- a/webui/src/pages/repositories/repository/objects.jsx
+++ b/webui/src/pages/repositories/repository/objects.jsx
@@ -682,9 +682,16 @@ const UploadButton = ({config, repo, reference, path, onDone, onClick, onHide, s
     <>
       <Modal size="xl" show={show} onHide={hide} backdrop="static" keyboard={!uploadState.inProgress}>
         <Modal.Header closeButton={!uploadState.inProgress}>
-          <Modal.Title>
-            <UploadIcon className="me-2" />
-            Upload Objects to Branch &apos;{reference.id}&apos;
+          <Modal.Title style={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
+            <UploadIcon className="me-2" style={{ flexShrink: 0 }} />
+            <span style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>Upload Objects to Branch &apos;</span>
+            <span style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              minWidth: 0
+            }} title={reference.id}>{reference.id}</span>
+            <span style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>&apos;</span>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
@@ -1041,7 +1048,18 @@ const TreeContainer = ({
             }
           }} 
           onRevert={onReset}
-          changesTreeMessage={<p>Showing {changesResults.length} change{changesResults.length !== 1 ? 's' : ''} for branch <strong>{reference.id}</strong></p>}
+          changesTreeMessage={
+            <p style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', flexWrap: 'wrap' }}>
+              <span>Showing {changesResults.length} change{changesResults.length !== 1 ? 's' : ''} for branch</span>
+              <strong style={{
+                maxWidth: '300px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                display: 'inline-block'
+              }} title={reference.id}>{reference.id}</strong>
+            </p>
+          }
           noChangesText="No changes - you can modify this branch by uploading data using the UI or any of the supported SDKs"
           emptyStateComponent={<EmptyChangesState repo={repo} reference={reference} toggleShowChanges={toggleShowChangesOnly} />}
         />
diff --git a/webui/src/pages/repositories/repository/pulls/pullDetails.jsx b/webui/src/pages/repositories/repository/pulls/pullDetails.jsx
index 86078a28392..afea3434265 100644
--- a/webui/src/pages/repositories/repository/pulls/pullDetails.jsx
+++ b/webui/src/pages/repositories/repository/pulls/pullDetails.jsx
@@ -7,7 +7,7 @@ import {GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestIcon} from "@prime
 import dayjs from "dayjs";
 import Markdown from 'react-markdown'
 
-import {AlertError, Loading} from "../../../../lib/components/controls";
+import {AlertError, Loading, TruncatedText} from "../../../../lib/components/controls";
 import {useRefs} from "../../../../lib/hooks/repo";
 import {useRouter} from "../../../../lib/hooks/router";
 import {RepoError} from "../error";
@@ -110,10 +110,17 @@ const PullDetailsContent = ({repo, pull}) => {
 // message example: "<author> wants to merge <source-branch> into <destination-branch>."
 const PullInfo = ({repo, pull}) => <>
     <StatusBadge status={pull.status}/>
-    <span className="ms-2">
-        <strong>{pull.author}</strong> {`${getActionText(pull.status)} `}
-        <BranchLink repo={repo} branch={pull.source_branch}/> {""}
-        into <BranchLink repo={repo} branch={pull.destination_branch}/>.
+    <span className="ms-2" style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', minWidth: 0, maxWidth: '100%' }}>
+        <strong style={{ flexShrink: 0 }}>{pull.author}</strong>
+        <span style={{ flexShrink: 0 }}>{getActionText(pull.status)}</span>
+        <span style={{ flexShrink: 1, minWidth: 0, maxWidth: '200px' }}>
+            <BranchLink repo={repo} branch={pull.source_branch}/>
+        </span>
+        <span style={{ flexShrink: 0 }}>into</span>
+        <span style={{ flexShrink: 1, minWidth: 0, maxWidth: '200px' }}>
+            <BranchLink repo={repo} branch={pull.destination_branch}/>
+        </span>
+        <span style={{ flexShrink: 0 }}>.</span>
     </span>
 </>;
 
@@ -185,7 +192,7 @@ const BranchLink = ({repo, branch}) =>
         params: {repoId: repo.id},
         query: {ref: branch}
     }}>
-        {branch}
+        <TruncatedText text={branch} maxLength={40} />
     </Link>;
 
 // this is pretty hacky, but there seem to be no other way to detect this specific error
diff --git a/webui/src/pages/repositories/repository/pulls/pullsList.jsx b/webui/src/pages/repositories/repository/pulls/pullsList.jsx
index 9d4e701ce8e..24e1d8d6d66 100644
--- a/webui/src/pages/repositories/repository/pulls/pullsList.jsx
+++ b/webui/src/pages/repositories/repository/pulls/pullsList.jsx
@@ -57,10 +57,10 @@ const PullWidget = ({repo, pull}) => {
                 </h6>
                 <small className="pull-description">{getDescription()}</small>
             </div>
-            <div className="float-end mt-2">
-                <div className="btn btn-light btn-sm">{pull.destination_branch}</div>
-                <ArrowLeftIcon className="m-1" size="small" verticalAlign="middle"/>
-                <div className="btn btn-light btn-sm">{pull.source_branch}</div>
+            <div className="float-end mt-2" style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', maxWidth: '50%' }}>
+                <div className="btn btn-light btn-sm" style={{ maxWidth: '45%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={pull.destination_branch}>{pull.destination_branch}</div>
+                <ArrowLeftIcon className="m-1" size="small" verticalAlign="middle" style={{ flexShrink: 0 }}/>
+                <div className="btn btn-light btn-sm" style={{ maxWidth: '45%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={pull.source_branch}>{pull.source_branch}</div>
             </div>
         </ListGroup.Item>
     );
diff --git a/webui/src/pages/repositories/repository/tags.jsx b/webui/src/pages/repositories/repository/tags.jsx
index 89977b8a638..16ee30bdc6b 100644
--- a/webui/src/pages/repositories/repository/tags.jsx
+++ b/webui/src/pages/repositories/repository/tags.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";
@@ -39,14 +39,14 @@ const TagWidget = ({ repo, tag, onDelete }) => {
     return (
         <ListGroup.Item>
             <div className="clearfix">
-                <div className="float-start">
-                    <h6 className="mb-0">
+                <div className="float-start" style={{ maxWidth: '50%', minWidth: 0 }}>
+                    <h6 className="mb-0" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         <Link href={{
                             pathname: '/repositories/:repoId/objects',
                             params: { repoId: repo.id },
                             query: { ref: tag.id }
                         }}>
-                            {tag.id}
+                            <TruncatedText text={tag.id} maxLength={60} />
                         </Link>
                     </h6>
                 </div>
diff --git a/webui/src/styles/objects/tree.css b/webui/src/styles/objects/tree.css
index 526b5df954a..ace39fa0e3a 100644
--- a/webui/src/styles/objects/tree.css
+++ b/webui/src/styles/objects/tree.css
@@ -18,6 +18,11 @@
   padding: 0;
 }
 
+.tree-container table {
+  table-layout: fixed;
+  width: 100%;
+}
+
 .tree-entry-row,
 .change-entry-row {
   transition: background-color var(--transition-fast);
@@ -30,6 +35,12 @@
 
 .tree-path {
   font-size: 0.9rem;
+  white-space: nowrap !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 0; /* Allow table to constrain width */
+  width: auto;
+  min-width: 0;
 }
 
 .tree-path .octicon {
@@ -65,6 +76,29 @@
   color: var(--bs-nav-link-color);
 }
 
+/* Change summary and row actions alignment */
+.change-summary {
+  white-space: nowrap !important;
+  vertical-align: middle;
+  width: auto;
+  min-width: 0;
+}
+
+/* Row actions alignment and spacing */
+.change-entry-row-actions {
+  white-space: nowrap !important;
+  vertical-align: middle;
+  width: auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.change-entry-row-actions .btn {
+  margin-left: 0;
+}
+
 /* Gear icon visibility and alignment */
 .change-entry-row-actions .dropdown-toggle,
 .row-hover .btn-outline-danger {