From 5ca896b8816f02b82c96630063197dd2410b3b4b Mon Sep 17 00:00:00 2001
From: Philip Waritschlager <philip@waritschlager.de>
Date: Sat, 28 Sep 2024 21:50:33 +0200
Subject: [PATCH] Set RefTip max-width to 350px, and make RefTips and subjects
 fully visible by hovering the graph visualization and the RefTips,
 respectively.

In a future VSCode version, hovering the author name will also automatically work for revealing the full subject.
---
 web/src/views/CommitRow.vue | 12 ++++++++++--
 web/src/views/RefTip.vue    |  6 ++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/views/CommitRow.vue b/web/src/views/CommitRow.vue
index e60ab1f..ecd2243 100644
--- a/web/src/views/CommitRow.vue
+++ b/web/src/views/CommitRow.vue
@@ -74,7 +74,7 @@ let calculated_height = computed(() =>
 	props.height || config.value['row-height'])
 </script>
 <style scoped>
-.commit {
+.commit-row {
 	user-select: none;
 }
 .info > * {
@@ -90,6 +90,9 @@ let calculated_height = computed(() =>
 	min-width: 150px;
 	display: inline-flex;
 }
+.info > .subject-wrapper:hover {
+	overflow: visible;
+}
 .info > .subject-wrapper > * {
 	text-overflow: ellipsis;
 }
@@ -100,6 +103,11 @@ let calculated_height = computed(() =>
 .info > .subject-wrapper > .vis-resize-handle {
 	cursor: col-resize;
 }
+.vis:hover ~ .info > .subject-wrapper > .commit-ref-tips,
+/* Works starting Chrome v129 which VSCode doesn't include *yet*. TODO test once shipped */
+.info > .subject-wrapper > .commit-ref-tips:has(~ .author:hover) {
+	max-width: 50px;
+}
 .info > .datetime,
 .info > .author {
 	color: #808080;
@@ -113,7 +121,7 @@ let calculated_height = computed(() =>
 .info .stats {
 	width: 91px;
 }
-.commit.merge .subject {
+.commit-row.merge .subject {
 	color: #808080;
 }
 </style>
diff --git a/web/src/views/RefTip.vue b/web/src/views/RefTip.vue
index d514b72..b15730c 100644
--- a/web/src/views/RefTip.vue
+++ b/web/src/views/RefTip.vue
@@ -94,6 +94,12 @@ let context_menu_provider = computed(() => () => {
 	border-radius: 7px;
 	white-space: pre;
 	margin: 0 1px;
+	max-width: 350px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ref-tip:hover {
+	max-width: unset;
 }
 .ref-tip.head {
 	/* box-shadow: 0px 0px 6px 4px rgba(255,255,255,0.188), 0px 0px 4px 0px rgba(255,255,255,0.188) inset; */