From 2d6019b8422ca74dfa7baf41d469fdfe53945ee2 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:39:27 -0400
Subject: [PATCH] fix: [M3-7256] - Added spacing for Hively external link
 (#9776)

---------

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
---
 .../.changeset/pr-9776-fixed-1696956017237.md |  5 ++++
 .../src/features/Support/Hively.stories.tsx   | 24 +++++++++++++++++++
 .../manager/src/features/Support/Hively.tsx   |  9 ++++++-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/.changeset/pr-9776-fixed-1696956017237.md
 create mode 100644 packages/manager/src/features/Support/Hively.stories.tsx

diff --git a/packages/manager/.changeset/pr-9776-fixed-1696956017237.md b/packages/manager/.changeset/pr-9776-fixed-1696956017237.md
new file mode 100644
index 00000000000..ffbed8005c2
--- /dev/null
+++ b/packages/manager/.changeset/pr-9776-fixed-1696956017237.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Customer success Hively overlap issue ([#9776](https://github.com/linode/manager/pull/9776))
diff --git a/packages/manager/src/features/Support/Hively.stories.tsx b/packages/manager/src/features/Support/Hively.stories.tsx
new file mode 100644
index 00000000000..28b38c76aad
--- /dev/null
+++ b/packages/manager/src/features/Support/Hively.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Hively } from './Hively';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Hively> = {
+  args: {
+    linodeUsername: 'linodeuser',
+    replyId: '123',
+    ticketId: '123',
+  },
+  component: Hively,
+  title: 'Components/Hively',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Hively>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => <Hively {...args} />,
+};
diff --git a/packages/manager/src/features/Support/Hively.tsx b/packages/manager/src/features/Support/Hively.tsx
index a87d04e77f5..2a811ed047d 100644
--- a/packages/manager/src/features/Support/Hively.tsx
+++ b/packages/manager/src/features/Support/Hively.tsx
@@ -10,8 +10,11 @@ import { parseAPIDate } from 'src/utilities/date';
 import { OFFICIAL_USERNAMES } from './ticketUtils';
 
 interface Props {
+  /** The username of the Linode user who created the ticket. */
   linodeUsername: string;
+  /** The ID of the reply. */
   replyId: string;
+  /** The ID of the ticket. */
   ticketId: string;
 }
 
@@ -48,7 +51,11 @@ export const Hively = (props: Props) => {
     <>
       <Divider />
       <Stack alignItems="center" direction="row" pl={1} spacing={1.5}>
-        <Typography mr={3}>
+        <Typography
+          sx={{
+            padding: '2px 20px 2px 0',
+          }}
+        >
           <Link external to={href + '3'}>
             How did I do?
           </Link>