diff --git a/frontend/app/theme.less b/frontend/app/theme.less
index 3c0c1467e..4c33e6c3a 100644
--- a/frontend/app/theme.less
+++ b/frontend/app/theme.less
@@ -73,6 +73,7 @@
     // xterm-decoration-top-layer: 7
     // xterm-decoration-overview-ruler: 8
     // xterm-decoration-top: 2
+    --zindex-xterm-viewport-overlay: 5; // Viewport contains the scrollbar
 
     // modal colors
     --modal-bg-color: #232323;
diff --git a/frontend/app/view/term/fitaddon.ts b/frontend/app/view/term/fitaddon.ts
index fccd1c4d1..db8c7add9 100644
--- a/frontend/app/view/term/fitaddon.ts
+++ b/frontend/app/view/term/fitaddon.ts
@@ -90,8 +90,7 @@ export class FitAddon implements ITerminalAddon, IFitApi {
         const elementPaddingVer = elementPadding.top + elementPadding.bottom;
         const elementPaddingHor = elementPadding.right + elementPadding.left;
         const availableHeight = parentElementHeight - elementPaddingVer;
-        // UPDATED added 6 here (adjustment in xterm.css, right: -6px for scrollbar)
-        const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth - 6;
+        const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
         const geometry = {
             cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
             rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height)),
diff --git a/frontend/app/view/term/term.less b/frontend/app/view/term/term.less
index 8dd176d57..18e1f26b5 100644
--- a/frontend/app/view/term/term.less
+++ b/frontend/app/view/term/term.less
@@ -119,29 +119,30 @@
 
     .terminal {
         .xterm-viewport {
-            right: -7px;
-        }
-        .xterm-viewport::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
-        }
+            z-index: var(--zindex-xterm-viewport-overlay);
 
-        .xterm-viewport::-webkit-scrollbar-track {
-            background-color: var(--scrollbar-background-color);
-        }
-
-        .xterm-viewport::-webkit-scrollbar-thumb {
-            display: none;
-            background-color: var(--scrollbar-thumb-color);
-            border-radius: 4px;
-            margin: 0 1px 0 1px;
-
-            &:hover {
-                background-color: var(--scrollbar-thumb-hover-color);
+            &::-webkit-scrollbar {
+                width: 6px;
+                height: 6px;
             }
 
-            &:active {
-                background-color: var(--scrollbar-thumb-active-color);
+            &::-webkit-scrollbar-track {
+                background-color: var(--scrollbar-background-color);
+            }
+
+            &::-webkit-scrollbar-thumb {
+                display: none;
+                background-color: var(--scrollbar-thumb-color);
+                border-radius: 4px;
+                margin: 0 1px 0 1px;
+
+                &:hover {
+                    background-color: var(--scrollbar-thumb-hover-color);
+                }
+
+                &:active {
+                    background-color: var(--scrollbar-thumb-active-color);
+                }
             }
         }
 
diff --git a/frontend/app/view/term/xterm.css b/frontend/app/view/term/xterm.css
index 650c6598d..e48c70756 100644
--- a/frontend/app/view/term/xterm.css
+++ b/frontend/app/view/term/xterm.css
@@ -96,7 +96,7 @@
     overflow-y: scroll;
     cursor: default;
     position: absolute;
-    right: -6px; /* if this gets updated, must update fitaddon.ts */
+    right: 0; /* if this gets updated, must update fitaddon.ts */
     left: 0;
     top: 0;
     bottom: 0;