diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index f4084a02a2..131c4f6d06 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -125,7 +125,7 @@
                 class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile u-padding-block-8 u-padding-inline-start-4">
                 <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
 
-                {data.database?.name}
+                <span class="database-name-text">{data.database?.name}</span>
             </a>
             <div class="entity-content" style:padding-bottom={entityContentPadding}>
                 {#if loading}
@@ -295,6 +295,7 @@
         margin-block-end: 4px;
         font-size: var(--font-size-sm);
         color: var(--fgcolor-neutral-secondary);
+        overflow: hidden;
 
         &:hover {
             color: var(--fgcolor-neutral-primary);
@@ -303,6 +304,13 @@
         }
     }
 
+    .database-name-text {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .entity-content {
         flex: 1;
         overflow-y: auto;