Fixed - long branch name overflows selected branch button

webui/src/lib/components/controls.jsx

@@ -109,17 +109,17 @@ export const FormattedDate = ({ dateValue, format = "MM/DD/YYYY HH:mm:ss" }) =>
 
 
 export const ActionGroup = ({ children, orientation = "left", className = "" }) => {
-    const side = (orientation === 'right') ? 'ms-auto' : '';
+    const side = orientation === 'right' ? 'col d-flex justify-content-end' : 'col-4';
     return (
-        <div role="toolbar" className={`${side} mb-2 btn-toolbar action-group-${orientation} ${className}`}>
+        <div role="toolbar" className={`btn-toolbar ${side} ${className}`}>
             {children}
         </div>
     );
 };
 
 export const ActionsBar = ({ children }) => {
     return (
-        <div className="action-bar d-flex mb-3">
+        <div className="action-bar row mb-3 gx-2">
             {children}
         </div>
     );
@@ -332,7 +332,9 @@ export const RefreshButton = ({ onClick, size = "md", variant = "light", tooltip
             tooltip={tooltip}
             variant={variant}
             onClick={onClick}
-            size={size}>
+            size={size}
+            className={"ms-1 me-1"}
+        >
             {icon}
         </TooltipButton>
     );

webui/src/lib/components/repository/compareBranchesSelection.jsx

@@ -36,7 +36,8 @@ const CompareBranchesSelection = (
     );
 
 
-    return <>
+    return (
+        <div className="d-flex">
             <RefDropdown
                 prefix={'Base '}
                 repo={repo}
@@ -46,7 +47,7 @@ const CompareBranchesSelection = (
                 withTags={withTags}
                 selectRef={onSelectRef}/>
 
-            <ArrowLeftIcon className="me-2 mt-2" size="small" verticalAlign="middle"/>
+            <ArrowLeftIcon className="ms-2 me-2 mt-2" size="small" verticalAlign="middle"/>
 
             <RefDropdown
                 prefix={'Compared to '}
@@ -64,11 +65,12 @@ const CompareBranchesSelection = (
                     <span>
                         <Button variant={"link"}
                                 onClick={handleSwitchRefs}>
-                            <ArrowSwitchIcon className="me-2 mt-2" size="small" verticalAlign="middle"/>
+                            <ArrowSwitchIcon className="ms-2 me-2 mt-2" size="small" verticalAlign="middle"/>
                         </Button>
                     </span>
             </OverlayTrigger>
-        </>;
+        </div>
+    );
 };
 
 export default CompareBranchesSelection;

webui/src/lib/components/repository/refDropdown.jsx

@@ -5,14 +5,13 @@ import Alert from "react-bootstrap/Alert";
 import Button from "react-bootstrap/Button";
 import Badge from "react-bootstrap/Badge";
 import Overlay from "react-bootstrap/Overlay";
-import {ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XIcon} from "@primer/octicons-react";
 import Popover from "react-bootstrap/Popover";
+import {Nav} from "react-bootstrap";
+import {ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XIcon} from "@primer/octicons-react";
 
 import {tags, branches, commits} from '../../api';
-import {Nav} from "react-bootstrap";
 import {RefTypeBranch, RefTypeCommit, RefTypeTag} from "../../../constants";
 
-
 const RefSelector = ({ repo, selected, selectRef, withCommits, withWorkspace, withTags, amount = 300 }) => {
     // used for ref pagination
     const [pagination, setPagination] = useState({after: "", prefix: "", amount});
@@ -265,8 +264,21 @@ const RefDropdown = ({ repo, selected, selectRef, onCancel, variant="light", pre
     const title = prefix + (!!selected) ? `${prefix} ${selected.type}: ` : '';
     return (
         <>
-            <Button ref={target} variant={variant} onClick={()=> { setShow(!show) }}>
-                {title} <strong>{showId(selected)}</strong> {show ? <ChevronUpIcon/> : <ChevronDownIcon/>}
+            <Button
+                ref={target}
+                variant={variant}
+                onClick={() => setShow(!show)}
+                style={{ maxWidth: '250px' }}
+                title={showId(selected)}
+                className="d-inline-flex align-items-center"
+            >
+                <span className="text-truncate">
+                    {title}
+                    <strong>{showId(selected)}</strong>
+                </span>
+                <span className="ms-1">
+                    {show ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                </span>
             </Button>
             {cancelButton}
             {popover}

webui/src/lib/components/repository/tree.jsx

@@ -650,30 +650,44 @@ export const URINavigator = ({
     <div className="d-flex">
       <div className="lakefs-uri flex-grow-1">
         {relativeTo === "" ? (
-          <>
-            <strong>{"lakefs://"}</strong>
-            <Link href={{ pathname: "/repositories/:repoId/objects", params }}>
-              {repo.id}
-            </Link>
-            <strong>{"/"}</strong>
-            <Link
-              href={{
-                pathname: "/repositories/:repoId/objects",
-                params,
-                query: { ref: reference.id },
-              }}
-            >
-              {reference.type === RefTypeCommit
-                ? reference.id.substr(0, 12)
-                : reference.id}
-            </Link>
-            <strong>{"/"}</strong>
-          </>
+            <Row>
+                <Col
+                    xs={11}
+                    title={reference.type === RefTypeCommit
+                        ? reference.id.substr(0, 12)
+                        : reference.id}
+                    className="text-nowrap overflow-hidden text-truncate"
+                >
+                  <strong>lakefs://</strong>
+                  <Link href={{ pathname: "/repositories/:repoId/objects", params }}>
+                    {repo.id}
+                  </Link>
+                  <strong>/</strong>
+                  <Link
+                      href={{
+                        pathname: "/repositories/:repoId/objects",
+                        params,
+                        query: { ref: reference.id },
+                      }}
+                  >
+                    {reference.type === RefTypeCommit
+                        ? reference.id.substr(0, 12)
+                        : reference.id}
+                  </Link>
+                  <strong>/</strong>
+                </Col>
+            </Row>
         ) : (
-          <>
-            <Link href={pathURLBuilder(params, { path: "" })}>{relativeTo}</Link>
-            <strong>{"/"}</strong>
-          </>
+          <Row>
+            <Col
+                xs={11}
+                title={relativeTo}
+                className="text-nowrap overflow-hidden text-truncate"
+            >
+                <Link href={pathURLBuilder(params, { path: "" })}>{relativeTo}</Link>
+                <strong>{"/"}</strong>
+              </Col>
+          </Row>
         )}
 
         {parts.map((part, i) => {

webui/src/pages/auth/groups/index.tsx

@@ -135,7 +135,9 @@ const GroupsContainer = () => {
                 <ActionGroup orientation="left">
                     <Button
                         variant="success"
-                        onClick={() => setShowCreate(true)}>
+                        onClick={() => setShowCreate(true)}
+                        className="me-1"
+                    >
                         Create Group
                     </Button>
 

webui/src/pages/auth/policies/index.jsx

@@ -59,7 +59,9 @@ const PoliciesContainer = () => {
                 <ActionGroup orientation="left">
                     <Button
                         variant="success"
-                        onClick={() => setShowCreate(true)}>
+                        onClick={() => setShowCreate(true)}
+                        className="me-1"
+                    >
                         Create Policy
                     </Button>
 

webui/src/pages/auth/users/index.jsx

@@ -86,15 +86,18 @@ const UsersContainer = ({ refresh, setRefresh, allUsers, loading, error }) => {
     return (
         <>
             <ActionsBar>
-                <UserActionsActionGroup canInviteUsers={canInviteUsers} selected={selected}
-                                        onClickInvite={() => setShowInvite(true)} onClickCreate={() => setShowCreate(true)}
-                                        onConfirmDelete={() => {
-                                            auth.deleteUsers(selected.map(u => u.id))
-                                                .catch(err => setDeleteError(err))
-                                                .then(() => {
-                                                    setSelected([]);
-                                                    setRefresh(!refresh);
-                                                })}}/>
+                <ActionGroup orientation="left">
+                    <UserActionsActionGroup canInviteUsers={canInviteUsers} selected={selected}
+                                            onClickInvite={() => setShowInvite(true)} onClickCreate={() => setShowCreate(true)}
+                                            onConfirmDelete={() => {
+                                                auth.deleteUsers(selected.map(u => u.id))
+                                                    .catch(err => setDeleteError(err))
+                                                    .then(() => {
+                                                        setSelected([]);
+                                                        setRefresh(!refresh);
+                                                    })}}
+                    />
+                </ActionGroup>
                 <ActionGroup orientation="right">
                     <SearchInput
                         searchPrefix={searchPrefix}
@@ -174,7 +177,7 @@ const UsersContainer = ({ refresh, setRefresh, allUsers, loading, error }) => {
 const UserActionsActionGroup = ({canInviteUsers, selected, onClickInvite, onClickCreate, onConfirmDelete }) => {
 
     return (
-        <ActionGroup orientation="left">
+        <div className="d-flex text-nowrap">
             <Button
                 hidden={!canInviteUsers}
                 variant="primary"
@@ -184,7 +187,9 @@ const UserActionsActionGroup = ({canInviteUsers, selected, onClickInvite, onClic
 
             <Button
                 variant="success"
-                onClick={onClickCreate}>
+                onClick={onClickCreate}
+                className="ms-1 me-1"
+            >
                 {canInviteUsers ? "Create API User" : "Create User"}
             </Button>
             <ConfirmationButton
@@ -194,7 +199,7 @@ const UserActionsActionGroup = ({canInviteUsers, selected, onClickInvite, onClic
                 msg={`Are you sure you'd like to delete ${selected.length} users?`}>
                 Delete Selected
             </ConfirmationButton>
-        </ActionGroup>
+        </div>
     );
 }
 

webui/src/pages/auth/users/user/effectivePolicies.jsx

@@ -52,13 +52,13 @@ const UserEffectivePoliciesList = ({ userId, after, onPaginate }) => {
 
             <ActionsBar>
                 <ActionGroup orientation="left">
-                    <p>
+                    <span className="d-flex text-nowrap">
                         <small>
                             <strong>
                             All policies attached to this user, through direct attachment or via group memberships
                             </strong>
                         </small>
-                    </p>
+                    </span>
                 </ActionGroup>
 
                 <ActionGroup orientation="right">

webui/src/pages/repositories/index.jsx

@@ -14,7 +14,7 @@ import {RepoIcon, SearchIcon} from "@primer/octicons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
-import {ActionsBar, AlertError, Loading, useDebouncedState} from "../../lib/components/controls";
+import {ActionGroup, ActionsBar, AlertError, Loading, useDebouncedState} from "../../lib/components/controls";
 import {config, repositories} from '../../lib/api';
 import {useAPI, useAPIWithPagination} from "../../lib/hooks/api";
 import {Paginator} from "../../lib/components/pagination";
@@ -259,9 +259,9 @@ const RepositoriesPage = () => {
     return (
         <Container fluid="xl" className="mt-3">
             {showActionsBar && <ActionsBar>
-                <Form style={{minWidth: 300}} onSubmit={e => { e.preventDefault(); }}>
-                    <Form.Group>
-                        <Col>
+                <ActionGroup orientation="left">
+                    <Form style={{minWidth: 300}} onSubmit={e => { e.preventDefault(); }}>
+                        <Form.Group>
                             <InputGroup>
                                 <InputGroup.Text>
                                     <SearchIcon/>
@@ -273,12 +273,14 @@ const RepositoriesPage = () => {
                                     onChange={event => setSearch(event.target.value)}
                                 />
                             </InputGroup>
-                        </Col>
-                    </Form.Group>
-                </Form>
-                <ButtonToolbar className="ms-auto mb-2">
-                    <CreateRepositoryButton variant={"success"} enabled={true} onClick={createRepositoryButtonCallback} />
-                </ButtonToolbar>
+                        </Form.Group>
+                    </Form>
+                </ActionGroup>
+                <ActionGroup orientation="right">
+                    <ButtonToolbar className="ms-auto mb-2">
+                        <CreateRepositoryButton variant={"success"} enabled={true} onClick={createRepositoryButtonCallback} />
+                    </ButtonToolbar>
+                </ActionGroup>
             </ActionsBar> }
 
                 <RepositoryList

webui/src/pages/repositories/repository/changes.jsx

@@ -73,7 +73,7 @@ const CommitButton = ({repo, onCommit, enabled = false}) => {
                     </Button>
                 </Modal.Footer>
             </Modal>
-            <Button variant="success" disabled={!enabled} onClick={() => setShow(true)}>
+            <Button variant="success" disabled={!enabled} onClick={() => setShow(true)} className="ms-1">
                 <GitCommitIcon/> Commit Changes{' '}
             </Button>
         </>

webui/src/pages/repositories/repository/objects.jsx

@@ -474,6 +474,7 @@ const UploadButton = ({config, repo, reference, path, onDone, onClick, onHide, s
       variant={!config.import_support ? "success" : "light"}
       disabled={disabled}
       onClick={onClick}
+      className="me-1"
       >
       <UploadIcon /> Upload Object
     </Button>
@@ -768,7 +769,6 @@ const ObjectsBrowser = ({ config }) => {
           }}
           onRefresh={refresh}
         />
-
         <ReadmeContainer
           config={config}
           reference={reference}

webui/src/pages/repositories/repository/settings/branches.jsx

@@ -43,7 +43,7 @@ const SettingsContainer = () => {
                     <div className={"ms-1 me-1 pl-0 d-flex"}>
                         <div className="flex-grow-1">Branch protection rules</div>
                         <RefreshButton className={"ms-1"} onClick={() => {setRefresh(!refresh)}}/>
-                        <Button className={"ms-2"} onClick={() => setShowCreateModal(true)}>Add</Button>
+                        <Button className={"ms-1"} onClick={() => setShowCreateModal(true)}>Add</Button>
                     </div>
                 </h4>
             </div>

webui/src/pages/repositories/repository/settings/retention.jsx

@@ -134,7 +134,7 @@ const GCPolicy = ({repo}) => {
                     {!error && !loading && !isPolicyNotSet &&
                         <Button className={"ms-2 btn-secondary"} disabled={isActionsDisabled} onClick={onDelete}>Delete
                             Policy</Button>}
-                    <Button className={"ms-2"} disabled={isActionsDisabled} onClick={() => setShowCreate(true)}>Edit Policy</Button>
+                    <Button className={"ms-1"} disabled={isActionsDisabled} onClick={() => setShowCreate(true)}>Edit Policy</Button>
                 </div>
             </h4>
         </div>