diff --git a/gradle/changelog/repository_flags.yaml b/gradle/changelog/repository_flags.yaml
new file mode 100644
index 0000000000..0005d60cda
--- /dev/null
+++ b/gradle/changelog/repository_flags.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Uniform rendering of tooltips for repository badges ([#1698](https://github.com/scm-manager/scm-manager/pull/1698))
diff --git a/scm-ui/ui-components/src/CardColumn.tsx b/scm-ui/ui-components/src/CardColumn.tsx
index 70d3da1946..c72deec191 100644
--- a/scm-ui/ui-components/src/CardColumn.tsx
+++ b/scm-ui/ui-components/src/CardColumn.tsx
@@ -59,11 +59,6 @@ const FooterWrapper = styled.div`
   padding-bottom: 1rem;
 `;
 
-const ContentLeft = styled.div`
-  margin-bottom: 0 !important;
-  overflow: hidden;
-`;
-
 const ContentRight = styled.div`
   margin-left: auto;
 `;
@@ -115,15 +110,15 @@ const CardColumn: FC<Props> = ({
         {renderAvatar}
         <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
           <div className="is-flex">
-            <ContentLeft className="content">
-              <p className="shorten-text is-marginless">{title}</p>
+            <div className="is-clipped mb-0">
+              <p className="shorten-text m-0">{title}</p>
               {renderDescription}
-            </ContentLeft>
+            </div>
             {renderContentRight}
           </div>
           <FooterWrapper className={classNames("level", "is-flex")}>
             <RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv>
-            <InheritFlexShrinkDiv className="level-right is-block is-mobile is-marginless shorten-text">
+            <InheritFlexShrinkDiv className="level-right is-block is-mobile m-0 shorten-text">
               {footerRight}
             </InheritFlexShrinkDiv>
           </FooterWrapper>
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 6fa4ee4174..7e1a50c3ca 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -2374,10 +2374,10 @@ exports[`Storyshots CardColumn Default 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <strong>
               title
@@ -2394,14 +2394,14 @@ exports[`Storyshots CardColumn Default 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <small>
             left footer
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small>
             right footer
@@ -2427,10 +2427,10 @@ exports[`Storyshots CardColumn Minimal 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <strong>
               title
@@ -2442,14 +2442,14 @@ exports[`Storyshots CardColumn Minimal 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <small>
             left footer
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small>
             right footer
@@ -2475,10 +2475,10 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <strong>
               title
@@ -2490,14 +2490,14 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <small>
             left footer
           </small>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -63316,24 +63316,32 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
-              <span
-                className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
-                title="archive.tooltip"
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
               >
-                repository.archived
-              </span>
+                <span
+                  className="tooltip has-tooltip-bottom"
+                  data-tooltip="archive.tooltip"
+                >
+                  <span
+                    className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                  >
+                    repository.archived
+                  </span>
+                </span>
+              </div>
             </span>
           </p>
           <p
@@ -63347,7 +63355,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63421,7 +63429,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -63471,18 +63479,21 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
+              />
             </span>
           </p>
           <p
@@ -63496,7 +63507,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63570,7 +63581,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -63620,13 +63631,13 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <i
                 className="far fa-star"
@@ -63635,6 +63646,9 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
                 heartOfGold
               </strong>
                
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
+              />
             </span>
           </p>
           <p
@@ -63648,7 +63662,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63722,7 +63736,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -63772,18 +63786,21 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
+              />
             </span>
           </p>
           <p
@@ -63797,7 +63814,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63871,7 +63888,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -63921,24 +63938,32 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
-              <span
-                className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
-                title="exporting.tooltip"
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
               >
-                repository.exporting
-              </span>
+                <span
+                  className="tooltip has-tooltip-bottom"
+                  data-tooltip="exporting.tooltip"
+                >
+                  <span
+                    className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                  >
+                    repository.exporting
+                  </span>
+                </span>
+              </div>
             </span>
           </p>
           <p
@@ -63952,7 +63977,7 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64026,7 +64051,7 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -64076,25 +64101,33 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
-              <span
-                className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
-                onClick={[Function]}
-                title="healthCheckFailure.tooltip"
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
               >
-                repository.healthCheckFailure
-              </span>
+                <span
+                  className="tooltip has-tooltip-bottom"
+                  data-tooltip="healthCheckFailure.tooltip"
+                >
+                  <span
+                    className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
+                    onClick={[Function]}
+                  >
+                    repository.healthCheckFailure
+                  </span>
+                </span>
+              </div>
             </span>
           </p>
           <p
@@ -64108,7 +64141,7 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64182,7 +64215,7 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -64232,30 +64265,42 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
-              <span
-                className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
-                title="archive.tooltip"
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
               >
-                repository.archived
-              </span>
-              <span
-                className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
-                title="exporting.tooltip"
-              >
-                repository.exporting
-              </span>
+                <span
+                  className="tooltip has-tooltip-bottom"
+                  data-tooltip="archive.tooltip"
+                >
+                  <span
+                    className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                  >
+                    repository.archived
+                  </span>
+                </span>
+                <span
+                  className="tooltip has-tooltip-bottom"
+                  data-tooltip="exporting.tooltip"
+                >
+                  <span
+                    className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
+                  >
+                    repository.exporting
+                  </span>
+                </span>
+              </div>
             </span>
           </p>
           <p
@@ -64269,7 +64314,7 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64343,7 +64388,7 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -64393,18 +64438,21 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
+              />
             </span>
           </p>
           <p
@@ -64418,7 +64466,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64499,7 +64547,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
@@ -64549,25 +64597,33 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
         className="is-flex"
       >
         <div
-          className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content"
+          className="is-clipped mb-0"
         >
           <p
-            className="shorten-text is-marginless"
+            className="shorten-text m-0"
           >
             <span
-              className="RepositoryEntry__Title-sc-6jys82-0 eaqclL"
+              className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
             >
               <strong>
                 heartOfGold
               </strong>
                
-              <span
-                className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
-                onClick={[Function]}
-                title="healthCheckFailure.tooltip"
+              <div
+                className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
               >
-                repository.healthCheckFailure
-              </span>
+                <span
+                  className="tooltip has-tooltip-bottom"
+                  data-tooltip="healthCheckFailure.tooltip"
+                >
+                  <span
+                    className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
+                    onClick={[Function]}
+                  >
+                    repository.healthCheckFailure
+                  </span>
+                </span>
+              </div>
             </span>
           </p>
           <p
@@ -64581,7 +64637,7 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
       >
         <div
-          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64655,7 +64711,7 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
           </a>
         </div>
         <div
-          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
         >
           <small
             className="level-item"
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
index 661fa9ff79..cac0fe7223 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -48,9 +48,13 @@ type State = {
 const Title = styled.span`
   display: flex;
   align-items: center;
+`;
 
-  & > * {
-    margin-right: 0.25rem;
+const RepositoryFlagContainer = styled.div`
+  /*pointer-events: all;*/
+
+  .tag {
+    margin-left: 0.25rem;
   }
 `;
 
@@ -181,8 +185,11 @@ class RepositoryEntry extends React.Component<Props, State> {
     return (
       <Title>
         <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
-        <strong>{repository.name}</strong> {repositoryFlags}
-        <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
+        <strong>{repository.name}</strong>{" "}
+        <RepositoryFlagContainer>
+          {repositoryFlags}
+          <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
+        </RepositoryFlagContainer>
       </Title>
     );
   };
diff --git a/scm-ui/ui-components/src/repos/RepositoryFlag.tsx b/scm-ui/ui-components/src/repos/RepositoryFlag.tsx
index a96f939f4b..b4aafafea6 100644
--- a/scm-ui/ui-components/src/repos/RepositoryFlag.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryFlag.tsx
@@ -23,20 +23,23 @@
  */
 
 import React, { FC } from "react";
-import Tag from "../Tag";
 import { Color, Size } from "../styleConstants";
+import Tooltip from "../Tooltip";
+import Tag from "../Tag";
 
 type Props = {
   color?: Color;
-  title?: string;
+  title: string;
   onClick?: () => void;
   size?: Size;
 };
 
-const RepositoryFlag: FC<Props> = ({ children, size = "small", ...props }) => (
-  <Tag size={size} {...props}>
-    {children}
-  </Tag>
+const RepositoryFlag: FC<Props> = ({ children, title, size = "small", ...props }) => (
+  <Tooltip location="bottom" message={title}>
+    <Tag size={size} {...props}>
+      {children}
+    </Tag>
+  </Tooltip>
 );
 
 export default RepositoryFlag;
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 82ddf72928..07c2d0be46 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -160,28 +160,18 @@ const RepositoryRoot = () => {
 
   const repositoryFlags = [];
   if (repository.archived) {
-    repositoryFlags.push(
-      <Tooltip message={t("archive.tooltip")}>
-        <RepositoryFlag size="normal">{t("repository.archived")}</RepositoryFlag>
-      </Tooltip>
-    );
+    repositoryFlags.push(<RepositoryFlag title={t("archive.tooltip")}>{t("repository.archived")}</RepositoryFlag>);
   }
 
   if (repository.exporting) {
-    repositoryFlags.push(
-      <Tooltip message={t("exporting.tooltip")}>
-        <RepositoryFlag size="normal">{t("repository.exporting")}</RepositoryFlag>
-      </Tooltip>
-    );
+    repositoryFlags.push(<RepositoryFlag title={t("exporting.tooltip")}>{t("repository.exporting")}</RepositoryFlag>);
   }
 
   if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) {
     repositoryFlags.push(
-      <Tooltip message={t("healthCheckFailure.tooltip")}>
-        <RepositoryFlag size="normal" onClick={() => setShowHealthCheck(true)} color="danger">
-          {t("repository.healthCheckFailure")}
-        </RepositoryFlag>
-      </Tooltip>
+      <RepositoryFlag color="danger" title={t("healthCheckFailure.tooltip")} onClick={() => setShowHealthCheck(true)}>
+        {t("repository.healthCheckFailure")}
+      </RepositoryFlag>
     );
   }