diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index 2f96728..8a41e95 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -15,8 +15,10 @@ export function MetaBar({ metaData }: Props) {
   return (
     <>
       <Breadcrumb className={'user-and-repo'}>
-        <Breadcrumb.Item href={userUrl}>{userName}</Breadcrumb.Item>
-        <Breadcrumb.Item href={repoUrl}>
+        <Breadcrumb.Item className={'user-name'} href={userUrl}>
+          {userName}
+        </Breadcrumb.Item>
+        <Breadcrumb.Item className={'repo-name'} href={repoUrl}>
           <Text fontWeight="bolder">{repoName}</Text>
         </Breadcrumb.Item>
       </Breadcrumb>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6f16af6..8e26562 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -466,11 +466,17 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
         .user-and-repo {
           display: inline; // would be override by CSS rule of section from @primer/css
-          line-height: 32px;
 
-          a {
-            color: var(--gitako-accent-fg);
-            white-space: normal;
+          li {
+            display: inline-flex;
+            align-items: center;
+            min-height: 32px;
+            padding: 4px 0;
+
+            a {
+              color: var(--gitako-accent-fg);
+              white-space: normal;
+            }
           }
         }
 
@@ -479,6 +485,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           padding: 4px 6px; // did not align well for some reason :/
           color: var(--gitako-fg-muted);
           background-color: var(--gitako-accent-subtle);
+          word-break: break-word;
         }
 
         .close-side-bar-button-position {