diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js
index 82922c97..11bd2ef9 100644
--- a/android/app/src/main/assets/public/main.js
+++ b/android/app/src/main/assets/public/main.js
@@ -1483,11 +1483,11 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
 
     let clickableContent = showRoomBar ? 
-        `<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left;">
-            ${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
+        `<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left; min-width: 0; width: auto; max-width: 100%;">
+            ${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
         </button>` :
-        `<inherit style="display: flex; align-items: center; height: 100%;">
-            ${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
+        `<inherit style="display: flex; align-items: center; height: 100%; min-width: 0; width: auto; max-width: 100%;">
+            ${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
         </inherit>`;
     roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
 
@@ -4695,3 +4695,69 @@ function scrollToPinnedMessage(e, msgId) {
     }
     scrollToMessage(msgId);
 }
+
+function checkTopbarSpace() {
+    if (typeof roomTopBar === 'undefined' || !roomTopBar) return;
+    
+    let transitionEl = roomTopBar.children.item(0);
+    if (!transitionEl) return;
+    
+    let children = Array.from(transitionEl.children);
+    let usedWidth = 0;
+    
+    let isPinHidden = document.body.classList.contains('hide-topbar-pin');
+    let isCallHidden = document.body.classList.contains('hide-topbar-call');
+    
+    for (let child of children) {
+        if (child.classList.contains('flex-spacer')) continue;
+        
+        if (child.classList.contains('room-action-pin') && isPinHidden) continue;
+        if (child.classList.contains('room-action-call') && isCallHidden) continue;
+        
+        let style = window.getComputedStyle(child);
+        let margins = (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
+
+        if (child.id === 'room-topbar-clickable' || child.tagName.toLowerCase() === 'inherit') {
+            let titleEl = child.querySelector('inherit');
+            if (titleEl) {
+                usedWidth += (child.offsetWidth - titleEl.offsetWidth) + titleEl.scrollWidth + margins;
+            } else {
+                usedWidth += child.offsetWidth + margins;
+            }
+        } else {
+            usedWidth += child.offsetWidth + margins;
+        }
+    }
+    
+    // Safety buffer for padding/rendering quirks
+    let diff = transitionEl.clientWidth - usedWidth - 5; 
+    let iconWidth = 50; 
+    
+    if (diff < 0) {
+        if (!isPinHidden) {
+            document.body.classList.add('hide-topbar-pin');
+        } else if (!isCallHidden) {
+            document.body.classList.add('hide-topbar-call');
+        }
+    } else {
+        if (isCallHidden && diff > iconWidth) {
+            document.body.classList.remove('hide-topbar-call');
+        } else if (isPinHidden && !isCallHidden && diff > iconWidth) {
+            document.body.classList.remove('hide-topbar-pin');
+        }
+    }
+}
+
+if (typeof roomTopBar !== 'undefined' && roomTopBar) {
+    let topbarResizeObserver = new ResizeObserver(() => {
+        checkTopbarSpace();
+    });
+    topbarResizeObserver.observe(roomTopBar);
+    
+    if (roomTopBar.children.length > 0) {
+        let topbarMutationObserver = new MutationObserver(() => {
+            setTimeout(checkTopbarSpace, 10);
+        });
+        topbarMutationObserver.observe(roomTopBar.children.item(0), { childList: true, subtree: true });
+    }
+}
diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css
index 58e48f25..675a9781 100644
--- a/android/app/src/main/assets/public/style.css
+++ b/android/app/src/main/assets/public/style.css
@@ -216,11 +216,6 @@ sidebar {
     border-right: var(--border-width) solid var(--light-border-color);
 }
 
-sidebar:not(.second) {
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
 sidebar:not(.second)::-webkit-scrollbar {
     display: none;
 }
@@ -1038,12 +1033,8 @@ roomcontent roomtopbar .room-action-call {
     display: none;
 }
 
-@media (max-width: 65rem) and (min-width: 55.001rem) {
-    roomcontent roomtopbar .room-action-pin { display: none !important; }
-    #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
-}
+body.hide-topbar-pin roomcontent roomtopbar .room-action-pin { display: none !important; }
+body.hide-topbar-pin #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
 
-@media (max-width: 58rem) and (min-width: 55.001rem) {
-    roomcontent roomtopbar .room-action-call { display: none !important; }
-    #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
-}
+body.hide-topbar-call roomcontent roomtopbar .room-action-call { display: none !important; }
+body.hide-topbar-call #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
diff --git a/webroot/main.js b/webroot/main.js
index 82922c97..11bd2ef9 100644
--- a/webroot/main.js
+++ b/webroot/main.js
@@ -1483,11 +1483,11 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     let pinCallBtns = showRoomBar ? `${pinBtnHtml}${callBtnHtml}` : '';
 
     let clickableContent = showRoomBar ? 
-        `<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left;">
-            ${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
+        `<button id="room-topbar-clickable" class="inherit" onclick="mobileNavDetails();" style="cursor: pointer; display: flex; align-items: center; border-radius: 0.65rem; background: transparent; outline: none; height: 100%; text-align: left; min-width: 0; width: auto; max-width: 100%;">
+            ${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
         </button>` :
-        `<inherit style="display: flex; align-items: center; height: 100%;">
-            ${icon ? icon + '<space></space>' : ''}<inherit>${processBlah(title)}</inherit>
+        `<inherit style="display: flex; align-items: center; height: 100%; min-width: 0; width: auto; max-width: 100%;">
+            ${icon ? icon + '<space></space>' : ''}<inherit style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: auto;">${processBlah(title)}</inherit>
         </inherit>`;
     roomsTopBarTransition.innerHTML = `${backBtnHtml}${clickableContent}<div class="flex-spacer"></div>${pinCallBtns}`;
 
@@ -4695,3 +4695,69 @@ function scrollToPinnedMessage(e, msgId) {
     }
     scrollToMessage(msgId);
 }
+
+function checkTopbarSpace() {
+    if (typeof roomTopBar === 'undefined' || !roomTopBar) return;
+    
+    let transitionEl = roomTopBar.children.item(0);
+    if (!transitionEl) return;
+    
+    let children = Array.from(transitionEl.children);
+    let usedWidth = 0;
+    
+    let isPinHidden = document.body.classList.contains('hide-topbar-pin');
+    let isCallHidden = document.body.classList.contains('hide-topbar-call');
+    
+    for (let child of children) {
+        if (child.classList.contains('flex-spacer')) continue;
+        
+        if (child.classList.contains('room-action-pin') && isPinHidden) continue;
+        if (child.classList.contains('room-action-call') && isCallHidden) continue;
+        
+        let style = window.getComputedStyle(child);
+        let margins = (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
+
+        if (child.id === 'room-topbar-clickable' || child.tagName.toLowerCase() === 'inherit') {
+            let titleEl = child.querySelector('inherit');
+            if (titleEl) {
+                usedWidth += (child.offsetWidth - titleEl.offsetWidth) + titleEl.scrollWidth + margins;
+            } else {
+                usedWidth += child.offsetWidth + margins;
+            }
+        } else {
+            usedWidth += child.offsetWidth + margins;
+        }
+    }
+    
+    // Safety buffer for padding/rendering quirks
+    let diff = transitionEl.clientWidth - usedWidth - 5; 
+    let iconWidth = 50; 
+    
+    if (diff < 0) {
+        if (!isPinHidden) {
+            document.body.classList.add('hide-topbar-pin');
+        } else if (!isCallHidden) {
+            document.body.classList.add('hide-topbar-call');
+        }
+    } else {
+        if (isCallHidden && diff > iconWidth) {
+            document.body.classList.remove('hide-topbar-call');
+        } else if (isPinHidden && !isCallHidden && diff > iconWidth) {
+            document.body.classList.remove('hide-topbar-pin');
+        }
+    }
+}
+
+if (typeof roomTopBar !== 'undefined' && roomTopBar) {
+    let topbarResizeObserver = new ResizeObserver(() => {
+        checkTopbarSpace();
+    });
+    topbarResizeObserver.observe(roomTopBar);
+    
+    if (roomTopBar.children.length > 0) {
+        let topbarMutationObserver = new MutationObserver(() => {
+            setTimeout(checkTopbarSpace, 10);
+        });
+        topbarMutationObserver.observe(roomTopBar.children.item(0), { childList: true, subtree: true });
+    }
+}
diff --git a/webroot/style.css b/webroot/style.css
index 58e48f25..675a9781 100644
--- a/webroot/style.css
+++ b/webroot/style.css
@@ -216,11 +216,6 @@ sidebar {
     border-right: var(--border-width) solid var(--light-border-color);
 }
 
-sidebar:not(.second) {
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
 sidebar:not(.second)::-webkit-scrollbar {
     display: none;
 }
@@ -1038,12 +1033,8 @@ roomcontent roomtopbar .room-action-call {
     display: none;
 }
 
-@media (max-width: 65rem) and (min-width: 55.001rem) {
-    roomcontent roomtopbar .room-action-pin { display: none !important; }
-    #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
-}
+body.hide-topbar-pin roomcontent roomtopbar .room-action-pin { display: none !important; }
+body.hide-topbar-pin #roomdetailsbar roomtopbar .room-action-pin { display: flex !important; }
 
-@media (max-width: 58rem) and (min-width: 55.001rem) {
-    roomcontent roomtopbar .room-action-call { display: none !important; }
-    #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }
-}
+body.hide-topbar-call roomcontent roomtopbar .room-action-call { display: none !important; }
+body.hide-topbar-call #roomdetailsbar roomtopbar .room-action-call { display: flex !important; }