From 7e613952f59d09ee232c9105ce837a93325d10f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 23 Nov 2023 16:36:11 +0100
Subject: [PATCH] Fix NodeId popover padding

---
 src/components/HoverPopover.svelte              | 11 ++++++-----
 src/components/NodeId.svelte                    |  7 ++++---
 src/views/projects/Source/BranchSelector.svelte |  4 +++-
 src/views/projects/Source/Header.svelte         |  2 +-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/HoverPopover.svelte b/src/components/HoverPopover.svelte
index 0e8e91192..30659e0bd 100644
--- a/src/components/HoverPopover.svelte
+++ b/src/components/HoverPopover.svelte
@@ -4,8 +4,9 @@
   export let disabled: boolean = false;
 
   export let onShow: () => void = () => {};
-  export let popoverPositionLeft: string | undefined = undefined;
-  export let popoverPositionTop: string | undefined = undefined;
+  export let stylePopoverPositionLeft: string | undefined = undefined;
+  export let stylePopoverPositionTop: string | undefined = undefined;
+  export let stylePopoverPadding: string | undefined = "1rem";
 
   let visible: boolean = false;
 
@@ -28,7 +29,6 @@
     position: relative;
     right: 1rem;
     z-index: 10;
-    padding: 1rem;
   }
 </style>
 
@@ -48,8 +48,9 @@
     <div style:position="absolute" on:click|stopPropagation>
       <div
         class="popover"
-        style:left={popoverPositionLeft}
-        style:top={popoverPositionTop}>
+        style:padding={stylePopoverPadding}
+        style:left={stylePopoverPositionLeft}
+        style:top={stylePopoverPositionTop}>
         <slot name="popover" />
       </div>
     </div>
diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
index d55970e3f..0b0e0851b 100644
--- a/src/components/NodeId.svelte
+++ b/src/components/NodeId.svelte
@@ -49,8 +49,9 @@
 
 <HoverPopover
   disabled={disableTooltip}
-  popoverPositionLeft="-4.5rem"
-  popoverPositionTop="-4.5rem">
+  stylePopoverPositionLeft="-4.5rem"
+  stylePopoverPadding="0.5rem 0.5rem 0.5rem 0.75rem"
+  stylePopoverPositionTop="-4.5rem">
   <div slot="toggle" class="avatar-alias" style:color={styleColor} class:large>
     <Avatar {nodeId} />
     {#if alias}
@@ -60,7 +61,7 @@
     {/if}
   </div>
 
-  <div style:padding="0.5rem 0.5rem 0.5rem 0.75rem" slot="popover">
+  <div slot="popover">
     <div class="popover-container">
       <div class="popover-avatar">
         <Avatar {nodeId} />
diff --git a/src/views/projects/Source/BranchSelector.svelte b/src/views/projects/Source/BranchSelector.svelte
index 92f5498f1..441699c23 100644
--- a/src/views/projects/Source/BranchSelector.svelte
+++ b/src/views/projects/Source/BranchSelector.svelte
@@ -39,7 +39,9 @@
 <div class="branch">
   {#if selectedBranch}
     {#if onCanonicalBranch}
-      <HoverPopover popoverPositionLeft="0" popoverPositionTop="0.5rem">
+      <HoverPopover
+        stylePopoverPositionLeft="0"
+        stylePopoverPositionTop="0.5rem">
         <Button
           ariaLabel="canonical-branch"
           variant="outline"
diff --git a/src/views/projects/Source/Header.svelte b/src/views/projects/Source/Header.svelte
index 4516f31c4..fab6eeca1 100644
--- a/src/views/projects/Source/Header.svelte
+++ b/src/views/projects/Source/Header.svelte
@@ -101,7 +101,7 @@
     </Link>
   </Radio>
 
-  <HoverPopover popoverPositionLeft="0" popoverPositionTop="0.5rem">
+  <HoverPopover stylePopoverPositionLeft="0" stylePopoverPositionTop="0.5rem">
     <Button disabled notAllowed={false} variant="outline" slot="toggle">
       <IconSmall name="user" />
       <div>