disable tooltip length limiter

app/src/lib/components/CommitCard.svelte

@@ -10,8 +10,10 @@
 	import { persistedCommitMessage } from '$lib/config/config';
 	import { draggable } from '$lib/dragging/draggable';
 	import { DraggableCommit, nonDraggable } from '$lib/dragging/draggables';
+	import { copyToClipboard } from '$lib/utils/clipboard';
 	import { getContext, getContextStore } from '$lib/utils/context';
 	import { getTimeAgo } from '$lib/utils/timeAgo';
+	import { tooltip } from '$lib/utils/tooltip';
 	import { openExternalUrl } from '$lib/utils/url';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { createCommitStore } from '$lib/vbranches/contexts';
@@ -25,7 +27,6 @@
 		type CommitStatus
 	} from '$lib/vbranches/types';
 	import { createEventDispatcher } from 'svelte';
-	import { tooltip } from '$lib/utils/tooltip';
 	// import { slide } from 'svelte/transition';
 
 	export let branch: Branch | undefined = undefined;
@@ -192,7 +193,14 @@
 						</h5>
 
 						<div class="text-base-11 commit__subtitle">
-							<span class="commit__id" use:tooltip={commit.id}>
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<span
+								class="commit__id"
+								use:tooltip={{ text: commit.id, noMaxWidth: true }}
+								on:click|stopPropagation={() => copyToClipboard(commit.id)}
+								role="button"
+								tabindex="0"
+							>
 								{commit.id.substring(0, 7)}
 
 								{#if commit.isSigned}

app/src/lib/utils/tooltip.ts

@@ -1,10 +1,12 @@
 export interface ToolTipOptions {
 	text: string;
+	noMaxWidth?: boolean;
 	delay?: number;
 }
 
 const defaultOptions: Partial<ToolTipOptions> = {
-	delay: 1200
+	delay: 1200,
+	noMaxWidth: false
 };
 
 export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string | undefined) {
@@ -15,7 +17,8 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 	let timeoutId: any;
 
 	// Options
-	let { text, delay } = defaultOptions;
+	// eslint-disable-next-line prefer-const
+	let { text, delay, noMaxWidth } = defaultOptions;
 
 	// Most use cases only involve passing a string, so we allow either opts of
 	// simple text.
@@ -23,7 +26,7 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		if (typeof opts == 'string') {
 			text = opts;
 		} else if (opts) {
-			({ text, delay } = opts || {});
+			({ text, delay, noMaxWidth } = opts || {});
 		}
 		if (tooltip && text) tooltip.innerText = text;
 	}
@@ -52,6 +55,7 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		tooltip = document.createElement('div') as HTMLDivElement;
 		// TODO: Can we co-locate tooltip.js & tooltip.postcss?
 		tooltip.classList.add('tooltip', 'text-base-11'); // see tooltip.postcss
+		if (noMaxWidth) tooltip.classList.add('no-max-width');
 		tooltip.innerText = text;
 		document.body.appendChild(tooltip);
 		adjustPosition();

app/src/styles/tooltip.css

@@ -15,6 +15,10 @@
 
 	opacity: 0;
 	animation: showup-tooltip-animation 0.1s ease-out forwards;
+
+	&.no-max-width {
+		max-width: unset;
+	}
 }
 
 @keyframes showup-tooltip-animation {