Skip to content

Commit 207c77c

Browse files
eamodioeamodio
committed
Fixes #4100 restricts hover sizing
1 parent fd0d687 commit 207c77c

File tree

3 files changed

+104
-79
lines changed

3 files changed

+104
-79
lines changed

‎CHANGELOG.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
1212

1313
### Fixed
1414

15+
- Fixes large commit messages work poorly on Commit Graph ([#4100](https://github.com/gitkraken/vscode-gitlens/issues/4100))
16+
17+
## [16.3.2] - 2025-02-21
18+
19+
## [16.3.1] - 2025-02-20
20+
21+
### Fixed
22+
1523
- Fixes Generate Commit Message Error - Anthropic ([#4071](https://github.com/gitkraken/vscode-gitlens/issues/4071))
1624
- Fixes Settings editor breaking when dragging it to a new tab group ([#4061](https://github.com/gitkraken/vscode-gitlens/issues/4061))
1725
- Fixes regression where hovering over the Graph WIP row doesn't show up anymore ([#4062](https://github.com/gitkraken/vscode-gitlens/issues/4062))
1826
- Fixes Inspect & Graph Details: autolinks rendering when enabled setting is false ([#3841](https://github.com/gitkraken/vscode-gitlens/issues/3841))
1927
- Fixes comparison with Merge Target on Home fails to open a valid comparison ([#4060](https://github.com/gitkraken/vscode-gitlens/issues/4060))
28+
- Fixes closing the walkthrough on Home from opening the walkthrough ([#4050](https://github.com/gitkraken/vscode-gitlens/issues/4050))
29+
- Fixes horizontal scrollbar from showing up on the old Home view ([#4051](https://github.com/gitkraken/vscode-gitlens/issues/4051))
30+
- Fixes a failure when copying changes to a worktree ([#4049](https://github.com/gitkraken/vscode-gitlens/issues/4049))
2031

2132
## [16.3.0] - 2025-02-11
2233

@@ -5987,7 +5998,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
59875998

59885999
- Initial release but still heavily a work in progress.
59896000

5990-
[unreleased]: https://github.com/gitkraken/vscode-gitlens/compare/v16.3.0...HEAD
6001+
[unreleased]: https://github.com/gitkraken/vscode-gitlens/compare/v16.3.2...HEAD
6002+
[16.3.2]: https://github.com/gitkraken/vscode-gitlens/compare/v16.3.1...gitkraken:v16.3.2
6003+
[16.3.1]: https://github.com/gitkraken/vscode-gitlens/compare/v16.3.0...gitkraken:v16.3.1
59916004
[16.3.0]: https://github.com/gitkraken/vscode-gitlens/compare/v16.2.1...gitkraken:v16.3.0
59926005
[16.2.1]: https://github.com/gitkraken/vscode-gitlens/compare/v16.2.0...gitkraken:v16.2.1
59936006
[16.2.0]: https://github.com/gitkraken/vscode-gitlens/compare/v16.1.1...gitkraken:v16.2.0

‎src/webviews/apps/plus/graph/hover/graphHover.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,15 @@ type Anchor = string | HTMLElement | { getBoundingClientRect: () => Omit<DOMRect
2828

2929
@customElement('gl-graph-hover')
3030
export class GlGraphHover extends GlElement {
31-
static override styles = css``;
31+
static override styles = css`
32+
gl-popover::part(body) {
33+
--max-width: min(92vw, 45rem);
34+
max-height: 50vh;
35+
width: clamp(min(30rem, 92vw), min-content, max-content);
36+
overflow-x: hidden;
37+
overflow-y: auto;
38+
}
39+
`;
3240

3341
@property({ type: Object })
3442
anchor?: Anchor;

‎src/webviews/apps/shared/components/overlays/popover.ts‎

Lines changed: 81 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
33
import { customElement, property, query } from 'lit/decorators.js';
44
import { parseDuration, waitForEvent } from '../../dom';
55
import { GlElement, observe } from '../element';
6+
import { scrollableBase } from '../styles/lit/base.css';
67
import '@shoelace-style/shoelace/dist/components/popup/popup.js';
78

89
// Adapted from shoelace tooltip
@@ -63,102 +64,105 @@ export class GlPopover extends GlElement {
6364
delegatesFocus: true,
6465
};
6566

66-
static override styles = css`
67-
:host {
68-
--hide-delay: 0ms;
69-
--show-delay: 500ms;
67+
static override styles = [
68+
scrollableBase,
69+
css`
70+
:host {
71+
--hide-delay: 0ms;
72+
--show-delay: 500ms;
7073
71-
display: contents;
72-
}
74+
display: contents;
75+
}
7376
74-
.popover {
75-
--arrow-size: var(--sl-tooltip-arrow-size);
76-
--arrow-color: var(--sl-tooltip-background-color);
77-
}
77+
.popover {
78+
--arrow-size: var(--sl-tooltip-arrow-size);
79+
--arrow-color: var(--sl-tooltip-background-color);
80+
}
7881
79-
.popover::part(popup) {
80-
z-index: var(--sl-z-index-tooltip);
81-
}
82+
.popover::part(popup) {
83+
z-index: var(--sl-z-index-tooltip);
84+
}
8285
83-
.popover::part(arrow) {
84-
border: 1px solid var(--gl-tooltip-border-color);
85-
z-index: 1;
86-
}
86+
.popover::part(arrow) {
87+
border: 1px solid var(--gl-tooltip-border-color);
88+
z-index: 1;
89+
}
8790
88-
.popover[placement^='top']::part(popup) {
89-
transform-origin: bottom;
90-
}
91+
.popover[placement^='top']::part(popup) {
92+
transform-origin: bottom;
93+
}
9194
92-
.popover[placement^='bottom']::part(popup) {
93-
transform-origin: top;
94-
}
95+
.popover[placement^='bottom']::part(popup) {
96+
transform-origin: top;
97+
}
9598
96-
.popover[placement^='left']::part(popup) {
97-
transform-origin: right;
98-
}
99+
.popover[placement^='left']::part(popup) {
100+
transform-origin: right;
101+
}
99102
100-
.popover[placement^='right']::part(popup) {
101-
transform-origin: left;
102-
}
103+
.popover[placement^='right']::part(popup) {
104+
transform-origin: left;
105+
}
103106
104-
.popover[data-current-placement^='top']::part(arrow) {
105-
border-top-width: 0;
106-
border-left-width: 0;
107-
clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
108-
}
107+
.popover[data-current-placement^='top']::part(arrow) {
108+
border-top-width: 0;
109+
border-left-width: 0;
110+
clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
111+
}
109112
110-
.popover[data-current-placement^='bottom']::part(arrow) {
111-
border-bottom-width: 0;
112-
border-right-width: 0;
113-
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
114-
}
113+
.popover[data-current-placement^='bottom']::part(arrow) {
114+
border-bottom-width: 0;
115+
border-right-width: 0;
116+
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
117+
}
115118
116-
.popover[data-current-placement^='left']::part(arrow) {
117-
border-bottom-width: 0;
118-
border-left-width: 0;
119-
clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 0 30%);
120-
}
119+
.popover[data-current-placement^='left']::part(arrow) {
120+
border-bottom-width: 0;
121+
border-left-width: 0;
122+
clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 0 30%);
123+
}
121124
122-
.popover[data-current-placement^='right']::part(arrow) {
123-
border-top-width: 0;
124-
border-right-width: 0;
125-
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 70%, 30% 0);
126-
}
125+
.popover[data-current-placement^='right']::part(arrow) {
126+
border-top-width: 0;
127+
border-right-width: 0;
128+
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 70%, 30% 0);
129+
}
127130
128-
.popover__body {
129-
display: block;
130-
width: fit-content;
131-
border: 1px solid var(--gl-tooltip-border-color);
132-
border-radius: var(--sl-tooltip-border-radius);
133-
box-shadow: 0 2px 8px var(--gl-tooltip-shadow);
134-
background-color: var(--sl-tooltip-background-color);
135-
font-family: var(--sl-tooltip-font-family);
136-
font-size: var(--sl-tooltip-font-size);
137-
font-weight: var(--sl-tooltip-font-weight);
138-
line-height: var(--sl-tooltip-line-height);
139-
text-align: start;
140-
white-space: normal;
141-
color: var(--sl-tooltip-color);
142-
padding: var(--sl-tooltip-padding);
143-
user-select: none;
144-
-webkit-user-select: none;
145-
max-width: min(var(--auto-size-available-width), var(--max-width, 70vw));
146-
/* max-height: var(--auto-size-available-height);
131+
.popover__body {
132+
display: block;
133+
width: fit-content;
134+
border: 1px solid var(--gl-tooltip-border-color);
135+
border-radius: var(--sl-tooltip-border-radius);
136+
box-shadow: 0 2px 8px var(--gl-tooltip-shadow);
137+
background-color: var(--sl-tooltip-background-color);
138+
font-family: var(--sl-tooltip-font-family);
139+
font-size: var(--sl-tooltip-font-size);
140+
font-weight: var(--sl-tooltip-font-weight);
141+
line-height: var(--sl-tooltip-line-height);
142+
text-align: start;
143+
white-space: normal;
144+
color: var(--sl-tooltip-color);
145+
padding: var(--sl-tooltip-padding);
146+
user-select: none;
147+
-webkit-user-select: none;
148+
max-width: min(var(--auto-size-available-width), var(--max-width, 70vw));
149+
/* max-height: var(--auto-size-available-height);
147150
overflow: auto; */
148-
pointer-events: all;
149-
}
151+
pointer-events: all;
152+
}
150153
151-
.popover[data-current-placement^='top'] .popover__body,
152-
.popover[data-current-placement^='bottom'] .popover__body {
153-
width: max-content;
154-
}
154+
.popover[data-current-placement^='top'] .popover__body,
155+
.popover[data-current-placement^='bottom'] .popover__body {
156+
width: max-content;
157+
}
155158
156-
/* .popover::part(hover-bridge) {
159+
/* .popover::part(hover-bridge) {
157160
background: tomato;
158161
opacity: 1;
159162
z-index: 10000000000;
160163
} */
161-
`;
164+
`,
165+
];
162166

163167
private closeWatcher!: CloseWatcher | null;
164168
private hoverTimeout!: ReturnType<typeof setTimeout>;
@@ -265,7 +269,7 @@ export class GlPopover extends GlElement {
265269
<div
266270
part="body"
267271
id="popover"
268-
class="popover__body"
272+
class="popover__body scrollable"
269273
role="tooltip"
270274
aria-live=${this.open ? 'polite' : 'off'}
271275
>

0 commit comments

Comments
 (0)