Reserve space in hovercard using CSS

refined-github · Jun 2, 2021 · 5964125 · 5964125 · yakov116 · Jun 2, 2021
1 parent ca3acf3
commit 5964125
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/source/features/user-local-time.css b/source/features/user-local-time.css
@@ -0,0 +1,5 @@
+/* Reserve some space in the hovercard to fix #4345 */
+.js-hovercard-content .Popover-message div.d-flex.mt-3 > div.overflow-hidden.ml-3:not(.rgh-user-local-time-container-added) {
+	/* 26px is the height of the div that is being inserted plus its margin TODO */
+	padding-bottom: 26px !important;
+}
diff --git a/source/features/user-local-time.tsx b/source/features/user-local-time.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-await-in-loop */
 
+import './user-local-time.css';
 import React from 'dom-chef';
 import cache from 'webext-storage-cache';
 import delay from 'delay';
@@ -78,7 +79,7 @@ function parseOffset(date: string): number {
 }
 
 function init(): void {
-	observe('.js-hovercard-content div.d-flex.mt-3 > div.overflow-hidden.ml-3:not(.rgh-user-local-time-added)', {
+	observe('.js-hovercard-content .Popover-message div.d-flex.mt-3 > div.overflow-hidden.ml-3:not(.rgh-user-local-time-container-added)', {
 		add: async hovercardContainer => {
 			const hovercard = hovercardContainer.closest<HTMLElement>('.Popover-message')!;
 			if (!select.exists('[data-hydro-view*="user-hovercard-hover"]', hovercard)) {
@@ -91,7 +92,7 @@ function init(): void {
 				return;
 			}
 
-			hovercardContainer.classList.add('rgh-user-local-time-added');
+			hovercardContainer.classList.add('rgh-user-local-time-container-added');
 
 			const datePromise = getLastCommitDate(login);
 			const race = await Promise.race([delay(300), datePromise]);