From 035f7e847aeba9ef3f6d4408dbdba0ebe937dd0b Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Fri, 13 May 2022 11:56:14 +0200
Subject: [PATCH] Fix branch table alignment (#2035)

The branch table provides an extension point to add further columns, but the content was not vertically aligned anymore after the changes in #2016. This PR adds the same classes to the extension point columns as the other columns have to assure vertical alignment.
---
 .../repos/branches/components/AheadBehindTag.tsx | 16 ++++++----------
 .../src/repos/branches/components/BranchRow.tsx  |  8 +++++---
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
index e2148bbf19..23d999f4e2 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
@@ -52,11 +52,11 @@ const Count = styled.span`
   width: max-content;
 `;
 
-const Bar = styled.span.attrs<BarProps>(props => ({
+const Bar = styled.span.attrs<BarProps>((props) => ({
   style: {
     width: props.width + "%",
-    borderRadius: props.direction === "left" ? "25px 0 0 25px" : "0 25px 25px 0"
-  }
+    borderRadius: props.direction === "left" ? "25px 0 0 25px" : "0 25px 25px 0",
+  },
 }))<BarProps>`
   height: 3px;
   max-width: 100%;
@@ -87,17 +87,13 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
     : details.changesetsAhead;
 
   return (
-    <div
-      className={`columns is-flex is-justify-content-center is-unselectable mt-1 ${
-        hiddenMobile ? "is-hidden-mobile" : ""
-      }`}
-    >
+    <div className={`is-flex is-justify-content-center is-unselectable my-1 ${hiddenMobile ? "is-hidden-mobile" : ""}`}>
       <TooltipWithDefaultCursor
         message={t("branch.aheadBehind.tooltip", { ahead: details.changesetsAhead, behind: details.changesetsBehind })}
         location="top"
       >
         <div className="is-flex">
-          <Behind className="column is-flex is-flex-direction-column is-align-items-flex-end p-0">
+          <Behind className="is-flex is-flex-direction-column is-align-items-flex-end p-0">
             <Count className="is-size-7 pr-1">{behindText}</Count>
             <Bar
               className="has-rounded-border-left has-background-secondary"
@@ -105,7 +101,7 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
               direction="left"
             />
           </Behind>
-          <Ahead className="column is-flex is-flex-direction-column is-align-items-flex-start p-0">
+          <Ahead className="is-flex is-flex-direction-column is-align-items-flex-start p-0">
             <Count className="is-size-7 pl-1">{aheadText}</Count>
             <Bar
               className="has-rounded-border-right has-background-secondary"
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
index 1b798726b8..cc4c94fdf8 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
@@ -102,10 +102,12 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
         )}
       </td>
       <td className="is-vertical-align-middle has-text-centered">{renderBranchTag()}</td>
-      {binder.hasExtension("repos.branches.row.details")
+      {binder.hasExtension("repos.branches.row.details", extensionProps)
         ? binder
-            .getExtensions("repos.branches.row.details")
-            .map((e) => <td>{React.createElement(e, extensionProps)}</td>)
+            .getExtensions("repos.branches.row.details", extensionProps)
+            .map((e) => (
+              <td className="is-vertical-align-middle has-text-centered">{React.createElement(e, extensionProps)}</td>
+            ))
         : null}
       <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
     </AdaptTableFlow>