diff --git a/src/renderer/src/assets/terminal.css b/src/renderer/src/assets/terminal.css index 31c2d142e..c7e117302 100644 --- a/src/renderer/src/assets/terminal.css +++ b/src/renderer/src/assets/terminal.css @@ -506,3 +506,27 @@ margin-top: var(--orca-pane-title-height); height: calc(100% - var(--orca-pane-title-height)); /* match margin-top */ } + +/* Ghostty-style URL hover: glued to the pane's true bottom-left corner. */ +.pane-link-tooltip { + position: absolute; + bottom: 0; + left: 0; + z-index: 40; + margin: 0; + /* Square on the window corner so the chrome itself has no inset gap. */ + border-radius: 0 4px 0 0; + border: 1px solid rgba(63, 63, 70, 0.6); + border-bottom: none; + border-left: none; + padding: 4px 8px; + max-width: 80%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + pointer-events: none; + font-size: 11px; + font-family: inherit; + color: #a1a1aa; + background: rgba(24, 24, 27, 0.85); +} diff --git a/src/renderer/src/lib/pane-manager/pane-dom-creation.test.ts b/src/renderer/src/lib/pane-manager/pane-dom-creation.test.ts index 3165e86c0..d4aa34759 100644 --- a/src/renderer/src/lib/pane-manager/pane-dom-creation.test.ts +++ b/src/renderer/src/lib/pane-manager/pane-dom-creation.test.ts @@ -69,8 +69,12 @@ describe('createPaneDOM link tooltips', () => { vi.fn() ) - expect(pane.linkTooltip.style.left).toBe('0px') - expect(pane.linkTooltip.style.bottom).toBe('0px') + // Why: corner offsets live in .pane-link-tooltip (terminal.css); JS only + // toggles visibility so padding/offset cannot drift back into inline styles. + expect(pane.linkTooltip.classList.contains('pane-link-tooltip')).toBe(true) + expect(pane.linkTooltip.style.left).toBe('') + expect(pane.linkTooltip.style.bottom).toBe('') + expect(pane.linkTooltip.style.display).toBe('none') }) it('uses desktop modifier-click text for WebLinks hover hints', () => { diff --git a/src/renderer/src/lib/pane-manager/pane-dom-creation.ts b/src/renderer/src/lib/pane-manager/pane-dom-creation.ts index 9d1038c45..3b1498b0a 100644 --- a/src/renderer/src/lib/pane-manager/pane-dom-creation.ts +++ b/src/renderer/src/lib/pane-manager/pane-dom-creation.ts @@ -66,15 +66,10 @@ export function createPaneDOM( let linkTooltipHoverToken = 0 const linkTooltip = document.createElement('div') - linkTooltip.className = 'pane-link-tooltip' - linkTooltip.classList.add('xterm-hover') - // Why: Ghostty-style URL hover belongs to the terminal window corner; do not - // let terminal content padding shift it inward. - linkTooltip.style.cssText = - 'display:none;position:absolute;bottom:0;left:0;z-index:40;' + - 'padding:5px 8px;border-radius:4px;font-size:11px;font-family:inherit;' + - 'color:#a1a1aa;background:rgba(24,24,27,0.85);border:1px solid rgba(63,63,70,0.6);' + - 'pointer-events:none;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' + // Why: styles live in terminal.css (.pane-link-tooltip) so the hover URL stays + // flush to the pane corner without inline padding/offset drift. + linkTooltip.className = 'pane-link-tooltip xterm-hover' + linkTooltip.style.display = 'none' const dragHandle = document.createElement('div') dragHandle.className = 'pane-drag-handle'