diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
index bfb89483deb37..cdccbde294ac0 100644
--- a/app/assets/stylesheets/common/base/sidebar-section-link.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -89,16 +89,16 @@
       @include ellipsis;
       padding-left: 0.5em;
       padding-right: 0.1em; // avoids some overflow cropping
-      text-align: right;
       color: var(--d-sidebar-link-badge-color);
       font-size: var(--font-down-2);
       font-weight: normal;
-      margin-left: auto;
+      flex-shrink: 0;
     }
 
     .sidebar-section-link-suffix {
       margin-left: 1em;
       font-size: var(--font-down-4);
+      flex-shrink: 0;
 
       &.icon {
         &.urgent svg {
@@ -113,6 +113,8 @@
 
     .sidebar-section-link-content-text {
       @include ellipsis;
+      min-width: 0;
+      flex: 0 1 auto;
 
       .user-status-message {
         vertical-align: -0.125em;
diff --git a/frontend/discourse/app/components/sidebar/api-section.gjs b/frontend/discourse/app/components/sidebar/api-section.gjs
index d9d48ee33dede..5bf073c64deab 100644
--- a/frontend/discourse/app/components/sidebar/api-section.gjs
+++ b/frontend/discourse/app/components/sidebar/api-section.gjs
@@ -56,6 +56,8 @@ const SidebarApiSection = <template>
             link.contentComponent
             status=link.contentComponentArgs
           }}
+          @suffixComponent={{link.suffixComponent}}
+          @suffixArgs={{link.suffixArgs}}
           @scrollIntoView={{and
             @scrollActiveLinkIntoView
             (eq link.name @section.activeLink.name)
diff --git a/frontend/discourse/app/components/sidebar/section-link.gjs b/frontend/discourse/app/components/sidebar/section-link.gjs
index 580c658422440..8000f585e771f 100644
--- a/frontend/discourse/app/components/sidebar/section-link.gjs
+++ b/frontend/discourse/app/components/sidebar/section-link.gjs
@@ -29,6 +29,14 @@ export function isHex(input) {
   }
 }
 
+/**
+ * Sidebar section link component.
+ *
+ * @component SectionLink
+ * @param {Component} @contentComponent - Component to render inside the link text span (gets ellipsized)
+ * @param {Component} @suffixComponent - Component to render after the link text (stays visible, not ellipsized)
+ * @param {Object} @suffixArgs - Arguments to pass to the suffix component
+ */
 export default class SectionLink extends Component {
   @service currentUser;
 
@@ -201,6 +209,10 @@ export default class SectionLink extends Component {
               </span>
             {{/if}}
 
+            {{#if @suffixComponent}}
+              <@suffixComponent @suffixArgs={{@suffixArgs}} />
+            {{/if}}
+
             {{#if @suffixValue}}
               <span
                 class={{concatClass
diff --git a/frontend/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js b/frontend/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
index a044eb762361c..2f09adb412d7f 100644
--- a/frontend/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
+++ b/frontend/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js
@@ -65,6 +65,16 @@ export default class BaseCustomSidebarSectionLink {
    */
   get contentCSSClass() {}
 
+  /**
+   * @returns {Component} Component to render inside the link text span (gets ellipsized with text)
+   */
+  get contentComponent() {}
+
+  /**
+   * @returns {Object} Arguments to pass to the content component
+   */
+  get contentComponentArgs() {}
+
   /**
    * @returns {string} Prefix type for the link. Accepted value: icon, image, text
    */
@@ -105,6 +115,16 @@ export default class BaseCustomSidebarSectionLink {
    */
   get suffixCSSClass() {}
 
+  /**
+   * @returns {Component} Component to render as suffix (outside text span, not ellipsized)
+   */
+  get suffixComponent() {}
+
+  /**
+   * @returns {Object} Arguments to pass to the suffix component
+   */
+  get suffixArgs() {}
+
   /**
    * @returns {string} Type of the hover button. Accepted value: icon
    */
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-sidebar-indicators.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-sidebar-indicators.gjs
index 624225938b992..6b816cf093666 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-sidebar-indicators.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-sidebar-indicators.gjs
@@ -6,13 +6,13 @@ import icon from "discourse/helpers/d-icon";
  * Displays unread indicators and user status for chat channels in the sidebar.
  *
  * @component ChatSidebarIndicators
- * @param {Object} @status - Channel status object containing unread counts and user status
- * @param {number} @status.unreadCount - Number of unread messages
- * @param {number} @status.unreadThreadsCount - Number of unread threads
- * @param {number} @status.mentionCount - Number of unread mentions
- * @param {number} @status.watchedThreadsUnreadCount - Number of unread watched threads
- * @param {boolean} @status.isDirectMessageChannel - Whether this is a DM channel
- * @param {Object} @status.userStatus - User status object for DM channels
+ * @param {Object} @suffixArgs - Arguments object when used as @suffixComponent
+ * @param {number} @suffixArgs.unreadCount - Number of unread messages
+ * @param {number} @suffixArgs.unreadThreadsCount - Number of unread threads
+ * @param {number} @suffixArgs.mentionCount - Number of unread mentions
+ * @param {number} @suffixArgs.watchedThreadsUnreadCount - Number of unread watched threads
+ * @param {boolean} @suffixArgs.isDirectMessageChannel - Whether this is a DM channel
+ * @param {Object} @suffixArgs.userStatus - User status object for DM channels
  */
 export default class ChatSidebarIndicators extends Component {
   /**
@@ -22,10 +22,10 @@ export default class ChatSidebarIndicators extends Component {
    */
   get hasUnread() {
     return (
-      this.args.status?.unreadCount > 0 ||
-      this.args.status?.unreadThreadsCount > 0 ||
-      this.args.status?.mentionCount > 0 ||
-      this.args.status?.watchedThreadsUnreadCount > 0
+      this.args.suffixArgs?.unreadCount > 0 ||
+      this.args.suffixArgs?.unreadThreadsCount > 0 ||
+      this.args.suffixArgs?.mentionCount > 0 ||
+      this.args.suffixArgs?.watchedThreadsUnreadCount > 0
     );
   }
 
@@ -38,13 +38,13 @@ export default class ChatSidebarIndicators extends Component {
    */
   get urgencyClass() {
     const hasUrgent =
-      this.args.status?.mentionCount > 0 ||
-      this.args.status?.watchedThreadsUnreadCount > 0;
+      this.args.suffixArgs?.mentionCount > 0 ||
+      this.args.suffixArgs?.watchedThreadsUnreadCount > 0;
 
     // For DMs, treat all unreads as urgent
     const hasUnreadDM =
-      this.args.status?.isDirectMessageChannel &&
-      this.args.status?.unreadCount > 0;
+      this.args.suffixArgs?.isDirectMessageChannel &&
+      this.args.suffixArgs?.unreadCount > 0;
 
     if (hasUrgent || hasUnreadDM) {
       return "urgent";
@@ -53,8 +53,8 @@ export default class ChatSidebarIndicators extends Component {
   }
 
   <template>
-    {{#if @status.userStatus}}
-      <UserStatusMessage @status={{@status.userStatus}} />
+    {{#if @suffixArgs.userStatus}}
+      <UserStatusMessage @status={{@suffixArgs.userStatus}} />
     {{/if}}
     {{#if this.hasUnread}}
       <span
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index ee5e071b2756c..a28bde7a5f1a2 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -189,11 +189,11 @@ function createChannelLink(BaseCustomSidebarSectionLink, options = {}) {
       return "";
     }
 
-    get contentComponent() {
+    get suffixComponent() {
       return ChatSidebarIndicators;
     }
 
-    get contentComponentArgs() {
+    get suffixArgs() {
       if (this.isDM) {
         return {
           userStatus: this.isOneOnOneDM
@@ -529,11 +529,11 @@ export default {
                 return this.channel.chatable.read_restricted ? "lock" : "";
               }
 
-              get contentComponent() {
+              get suffixComponent() {
                 return ChatSidebarIndicators;
               }
 
-              get contentComponentArgs() {
+              get suffixArgs() {
                 return {
                   unreadCount: this.channel.tracking.unreadCount,
                   // We want to do this so we don't show a blue dot if the user is inside
@@ -680,11 +680,11 @@ export default {
                 return this.channel.chatable.users.length === 1;
               }
 
-              get contentComponent() {
+              get suffixComponent() {
                 return ChatSidebarIndicators;
               }
 
-              get contentComponentArgs() {
+              get suffixArgs() {
                 return {
                   userStatus: this.oneOnOneMessage
                     ? this.channel.chatable.users[0].get("status")
diff --git a/plugins/chat/assets/stylesheets/common/core-extensions.scss b/plugins/chat/assets/stylesheets/common/core-extensions.scss
index 8f029ecf88568..977fc45db7ef8 100644
--- a/plugins/chat/assets/stylesheets/common/core-extensions.scss
+++ b/plugins/chat/assets/stylesheets/common/core-extensions.scss
@@ -35,6 +35,7 @@
   display: inline-flex;
   align-items: center;
   margin-left: 0.5em;
+  flex-shrink: 0;
 
   svg {
     font-size: var(--font-down-2);
diff --git a/plugins/chat/test/javascripts/components/chat-sidebar-indicators-test.gjs b/plugins/chat/test/javascripts/components/chat-sidebar-indicators-test.gjs
index fca85f00fa9cc..d9e9f0502940d 100644
--- a/plugins/chat/test/javascripts/components/chat-sidebar-indicators-test.gjs
+++ b/plugins/chat/test/javascripts/components/chat-sidebar-indicators-test.gjs
@@ -9,48 +9,63 @@ module(
     setupRenderingTest(hooks);
 
     test("shows indicator when unreadCount > 0", async function (assert) {
+      // Create a status object with unread count set to 1
       const status = { unreadCount: 1 };
 
+      // Render the ChatSidebarIndicators component with the status
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
+      // Assert that the badge element exists in the DOM
       assert.dom(".sidebar-section-link-content-badge").exists();
     });
 
     test("shows indicator when unreadThreadsCount > 0", async function (assert) {
+      // Set up status with unread threads count
       const status = { unreadThreadsCount: 1 };
 
+      // Render the component with the status data
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
+      // Verify the badge appears
       assert.dom(".sidebar-section-link-content-badge").exists();
     });
 
     test("shows indicator when mentionCount > 0", async function (assert) {
+      // Create status object with mention count
       const status = { mentionCount: 1 };
 
+      // Render the component
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
+      // Check that the badge element is present
       assert.dom(".sidebar-section-link-content-badge").exists();
+      // Check that the badge has the urgent class
       assert.dom(".sidebar-section-link-content-badge").hasClass("urgent");
     });
 
     test("shows indicator when watchedThreadsUnreadCount > 0", async function (assert) {
+      // Initialize status with watched threads unread count
       const status = { watchedThreadsUnreadCount: 1 };
 
+      // Render the ChatSidebarIndicators component
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
+      // Ensure the badge exists
       assert.dom(".sidebar-section-link-content-badge").exists();
+      // Ensure the badge has urgent class applied
       assert.dom(".sidebar-section-link-content-badge").hasClass("urgent");
     });
 
     test("does not show indicator when all counts are 0", async function (assert) {
+      // Create a status object with all counts set to 0
       const status = {
         unreadCount: 0,
         unreadThreadsCount: 0,
@@ -58,10 +73,12 @@ module(
         watchedThreadsUnreadCount: 0,
       };
 
+      // Render the component with zero counts
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
+      // Assert the badge should not be visible
       assert.dom(".sidebar-section-link-content-badge").doesNotExist();
     });
 
@@ -72,7 +89,7 @@ module(
       };
 
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
       assert.dom(".sidebar-section-link-content-badge").hasClass("urgent");
@@ -85,7 +102,7 @@ module(
       };
 
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
       assert.dom(".sidebar-section-link-content-badge").hasClass("unread");
@@ -101,7 +118,7 @@ module(
       };
 
       await render(
-        <template><ChatSidebarIndicators @status={{status}} /></template>
+        <template><ChatSidebarIndicators @suffixArgs={{status}} /></template>
       );
 
       assert.dom(".sidebar-section-link-content-badge").exists();