xiaoxue_admin
/
orca
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(terminal): flush URL hover tooltip to pane bottom-left corner (#10351) 

Move link-tooltip chrome into terminal.css so offsets cannot drift via
inline styles, and square the bottom-left corner so the hover preview
sits flush against the pane edge (Ghostty-style).
This commit is contained in:
Neil 2026-07-24 01:50:55 -07:00 committed by GitHub
parent 981653f27d
commit 1367094bbc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/src/assets/terminal.css
View File

@ -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);
}

8
src/renderer/src/lib/pane-manager/pane-dom-creation.test.ts
View File

@ -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', () => {

13
src/renderer/src/lib/pane-manager/pane-dom-creation.ts
View File

@ -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'