diff --git a/src/views/studio/studio-tab-nav.jsx b/src/views/studio/studio-tab-nav.jsx
index 389ef92bb..c3a122b73 100644
--- a/src/views/studio/studio-tab-nav.jsx
+++ b/src/views/studio/studio-tab-nav.jsx
@@ -13,6 +13,32 @@ import projectsIcon from './icons/projects-icon.svg';
import {selectIsFetchingInfo, selectStudioCommentCount, selectStudioProjectCount} from '../../redux/studio';
+
+/**
+ * Format a number to a string. If the number is below the limit, format as-is. Otherwise, show a '+' to indicate that
+ * the actual number might be higher.
+ * @example
+ * limitCount(1, 100) == '1'
+ * limitCount(12.5, 100) == '12.5'
+ * limitCount(100, 100) == '100+'
+ * limitCount(999, 100) == '100+'
+ * @param {number} num - the number to format
+ * @param {number} limit - the number at which we start showing a '+'
+ * @returns {string} - a string representing a number, possibly with a '+' at the end
+ */
+const limitCount = (num, limit) => {
+ if (num < limit) {
+ return `${num}`;
+ }
+ return `${limit}+`;
+};
+
+// These must match the limits used by the API
+const countLimits = {
+ comments: 100,
+ projects: 100
+};
+
const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
const {params: {studioPath, studioId}} = useRouteMatch();
const base = `/${studioPath}/${studioId}`;
@@ -30,7 +56,7 @@ const StudioTabNav = ({isFetchingInfo, commentCount, projectCount}) => {
src={projectsIcon}
/>
{
src={commentsIcon}
/>