From fb47d7346663f2f917176a4e302328d7e933847e Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 17 Sep 2024 17:28:19 -0400
Subject: [PATCH 1/2] refactor: revert sidebar button size

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/components/Sidebar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c200bc0b..0d58ddc9 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -184,7 +184,11 @@ export const Sidebar: FC = () => {
               title="Refresh notifications"
               isTooltipDisabled={false}
               icon={(iconProps) => (
-                <RefreshIcon {...iconProps} size="small" primaryColor="white" />
+                <RefreshIcon
+                  {...iconProps}
+                  size="medium"
+                  primaryColor="white"
+                />
               )}
               appearance="subtle"
               shape="circle"
@@ -198,7 +202,7 @@ export const Sidebar: FC = () => {
               icon={(iconProps) => (
                 <SettingsIcon
                   {...iconProps}
-                  size="small"
+                  size="medium"
                   primaryColor="white"
                 />
               )}

From cff888938c55f0f0891c7cb557523f8bff0bf96c Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 17 Sep 2024 22:30:00 -0400
Subject: [PATCH 2/2] feat: improve tooltip positions

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/components/AccountNotifications.tsx       |   94 +-
 src/components/NotificationRow.tsx            |   36 +-
 src/components/ProductNotifications.tsx       |   68 +-
 src/components/Sidebar.tsx                    |  164 +-
 .../AccountNotifications.test.tsx.snap        | 1776 +++++++++--------
 .../NotificationRow.test.tsx.snap             |  272 +--
 .../ProductNotifications.test.tsx.snap        |  244 +--
 .../__snapshots__/Sidebar.test.tsx.snap       |  636 +++---
 src/components/settings/SettingsFooter.tsx    |   39 +-
 .../__snapshots__/Settings.test.tsx.snap      |  164 +-
 10 files changed, 1844 insertions(+), 1649 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 133335a1..c12e0029 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -86,7 +86,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
       >
         <Flex alignItems="center" justifyContent="space-between">
           <Inline space="space.100" alignBlock="center">
-            <Tooltip content="Open account profile">
+            <Tooltip content="Open account profile" position="right">
               <AvatarItem
                 avatar={
                   <Avatar
@@ -108,46 +108,58 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           </Inline>
 
           <Inline space="space.100">
-            <IconButton
-              label="My pull requests"
-              title="My pull requests"
-              icon={(iconProps) => (
-                <BitbucketIcon {...iconProps} size="xsmall" />
-              )}
-              shape="circle"
-              spacing="compact"
-              appearance="subtle"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                openMyPullRequests();
-              }}
-            />
-
-            <IconButton
-              label="Mark all account notifications as read"
-              title="Mark all account notifications as read"
-              icon={(iconProps) => (
-                <HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
-              )}
-              shape="circle"
-              spacing="compact"
-              appearance="subtle"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                markNotificationsAsRead(account, accountNotificationIDs);
-              }}
-            />
-
-            <IconButton
-              label={toggleAccountNotificationsLabel}
-              title={toggleAccountNotificationsLabel}
-              icon={ChevronIcon}
-              shape="circle"
-              spacing="compact"
-              appearance="subtle"
-            />
+            <Tooltip content="My pull requests" position="bottom">
+              <IconButton
+                label="My pull requests"
+                icon={(iconProps) => (
+                  <BitbucketIcon {...iconProps} size="xsmall" />
+                )}
+                shape="circle"
+                spacing="compact"
+                appearance="subtle"
+                onClick={(event: MouseEvent<HTMLElement>) => {
+                  // Don't trigger onClick of parent element.
+                  event.stopPropagation();
+                  openMyPullRequests();
+                }}
+              />
+            </Tooltip>
+
+            <Tooltip
+              content="Mark all account notifications as read"
+              position="bottom"
+            >
+              <IconButton
+                label="Mark all account notifications as read"
+                icon={(iconProps) => (
+                  <HipchatMediaAttachmentCountIcon
+                    {...iconProps}
+                    size="small"
+                  />
+                )}
+                shape="circle"
+                spacing="compact"
+                appearance="subtle"
+                onClick={(event: MouseEvent<HTMLElement>) => {
+                  // Don't trigger onClick of parent element.
+                  event.stopPropagation();
+                  markNotificationsAsRead(account, accountNotificationIDs);
+                }}
+              />
+            </Tooltip>
+
+            <Tooltip
+              content={toggleAccountNotificationsLabel}
+              position="bottom"
+            >
+              <IconButton
+                label={toggleAccountNotificationsLabel}
+                icon={ChevronIcon}
+                shape="circle"
+                spacing="compact"
+                appearance="subtle"
+              />
+            </Tooltip>
           </Inline>
         </Flex>
       </Box>
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index f4a9ee45..913ec797 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -62,14 +62,14 @@ export const NotificationRow: FC<INotificationRow> = ({
     >
       <div className="mr-3 flex items-center justify-center">
         <Stack space="space.100" alignInline="center">
-          <Tooltip content={notification.actor.displayName}>
+          <Tooltip content={notification.actor.displayName} position="right">
             <Avatar
               name={notification.actor.displayName}
               src={notification.actor.avatarURL}
               size="small"
             />
           </Tooltip>
-          <Tooltip content={categoryDetails.description}>
+          <Tooltip content={categoryDetails.description} position="right">
             <CategoryIcon {...CategoryIconProps} />
           </Tooltip>
         </Stack>
@@ -123,21 +123,23 @@ export const NotificationRow: FC<INotificationRow> = ({
 
       {!animateExit && !isRead && notification.unread && (
         <Flex alignItems="center">
-          <IconButton
-            label="Mark as read"
-            title="Mark as read"
-            icon={(iconProps) => (
-              <HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
-            )}
-            shape="circle"
-            spacing="compact"
-            appearance="subtle"
-            onClick={() => {
-              setAnimateExit(!settings.delayNotificationState);
-              setShowAsRead(settings.delayNotificationState);
-              markNotificationRead(notification);
-            }}
-          />
+          <Tooltip content="Mark as read" position="left">
+            <IconButton
+              label="Mark as read"
+              title="Mark as read"
+              icon={(iconProps) => (
+                <HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
+              )}
+              shape="circle"
+              spacing="compact"
+              appearance="subtle"
+              onClick={() => {
+                setAnimateExit(!settings.delayNotificationState);
+                setShowAsRead(settings.delayNotificationState);
+                markNotificationRead(notification);
+              }}
+            />
+          </Tooltip>
         </Flex>
       )}
     </div>
diff --git a/src/components/ProductNotifications.tsx b/src/components/ProductNotifications.tsx
index e0e92bfb..966040bd 100644
--- a/src/components/ProductNotifications.tsx
+++ b/src/components/ProductNotifications.tsx
@@ -7,6 +7,7 @@ import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import HipchatMediaAttachmentCountIcon from '@atlaskit/icon/glyph/hipchat/media-attachment-count';
 import { Box, Flex, Inline, Stack } from '@atlaskit/primitives';
 
+import Tooltip from '@atlaskit/tooltip';
 import { AppContext } from '../context/App';
 import type { AtlasifyNotification } from '../types';
 import { markNotificationsAsRead } from '../utils/api/client';
@@ -75,35 +76,46 @@ export const ProductNotifications: FC<IProductNotifications> = ({
           </Button>
 
           <Inline space="space.100">
-            <IconButton
-              label="Mark all product notifications as read"
-              title="Mark all product notifications as read"
-              icon={(iconProps) => (
-                <HipchatMediaAttachmentCountIcon {...iconProps} size="small" />
-              )}
-              shape="circle"
-              spacing="compact"
-              appearance="subtle"
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                setAnimateExit(!settings.delayNotificationState);
-                setShowAsRead(settings.delayNotificationState);
-                markNotificationsAsRead(
-                  productNotifications[0].account,
-                  productNotificationIDs,
-                );
-              }}
-            />
+            <Tooltip
+              content="Mark all product notifications as read"
+              position="bottom"
+            >
+              <IconButton
+                label="Mark all product notifications as read"
+                icon={(iconProps) => (
+                  <HipchatMediaAttachmentCountIcon
+                    {...iconProps}
+                    size="small"
+                  />
+                )}
+                shape="circle"
+                spacing="compact"
+                appearance="subtle"
+                onClick={(event: MouseEvent<HTMLElement>) => {
+                  // Don't trigger onClick of parent element.
+                  event.stopPropagation();
+                  setAnimateExit(!settings.delayNotificationState);
+                  setShowAsRead(settings.delayNotificationState);
+                  markNotificationsAsRead(
+                    productNotifications[0].account,
+                    productNotificationIDs,
+                  );
+                }}
+              />
+            </Tooltip>
 
-            <IconButton
-              label={toggleProductNotificationsLabel}
-              title={toggleProductNotificationsLabel}
-              icon={ChevronIcon}
-              shape="circle"
-              spacing="compact"
-              appearance="subtle"
-            />
+            <Tooltip
+              content={toggleProductNotificationsLabel}
+              position="bottom"
+            >
+              <IconButton
+                label={toggleProductNotificationsLabel}
+                icon={ChevronIcon}
+                shape="circle"
+                spacing="compact"
+                appearance="subtle"
+              />
+            </Tooltip>
           </Inline>
         </Flex>
       </Box>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 0d58ddc9..b3e98842 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -71,21 +71,25 @@ export const Sidebar: FC = () => {
     <div className="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-sidebar">
       <div className="flex flex-1 flex-col items-center py-4">
         <div className="mx-auto my-3">
-          <IconButton
-            label="Home"
-            title="Home"
-            appearance="subtle"
-            isTooltipDisabled={false}
-            icon={(iconProps) => (
-              <AtlasIcon {...iconProps} size="medium" appearance="inverse" />
-            )}
-            shape="circle"
-            onClick={() => navigate('/', { replace: true })}
-          />
+          <Tooltip content="Home" position="right">
+            <IconButton
+              label="Home"
+              title="Home"
+              appearance="subtle"
+              icon={(iconProps) => (
+                <AtlasIcon {...iconProps} size="medium" appearance="inverse" />
+              )}
+              shape="circle"
+              onClick={() => navigate('/', { replace: true })}
+            />
+          </Tooltip>
         </div>
 
         <Stack alignInline="center" space="space.100">
-          <Tooltip content={`${notificationsLabel} unread notifications`}>
+          <Tooltip
+            content={`${notificationsLabel} unread notifications`}
+            position="right"
+          >
             <Button
               iconBefore={(iconProps) => (
                 <NotificationIcon
@@ -108,7 +112,10 @@ export const Sidebar: FC = () => {
 
           {isLoggedIn && (
             <>
-              <Tooltip content="Show only unread notifications">
+              <Tooltip
+                content="Show only unread notifications"
+                position="right"
+              >
                 <Toggle
                   id="toggle-unread-only"
                   size="regular"
@@ -123,31 +130,36 @@ export const Sidebar: FC = () => {
                 />
               </Tooltip>
 
-              <IconButton
-                label="Group notifications by products"
-                title="Group notifications by products"
-                isTooltipDisabled={false}
-                icon={() => (
-                  <ListIcon
-                    label="groupByProduct"
-                    size="small"
-                    primaryColor="white"
-                  />
-                )}
-                onClick={() => {
-                  updateSetting(
-                    'groupNotificationsByProduct',
-                    !settings.groupNotificationsByProduct,
-                  );
-                }}
-                appearance={
-                  settings.groupNotificationsByProduct ? 'discovery' : 'subtle'
-                }
-                spacing="compact"
-                shape="circle"
-              />
+              <Tooltip
+                content="Group notifications by products"
+                position="right"
+              >
+                <IconButton
+                  label="Group notifications by products"
+                  icon={() => (
+                    <ListIcon
+                      label="groupByProduct"
+                      size="small"
+                      primaryColor="white"
+                    />
+                  )}
+                  onClick={() => {
+                    updateSetting(
+                      'groupNotificationsByProduct',
+                      !settings.groupNotificationsByProduct,
+                    );
+                  }}
+                  appearance={
+                    settings.groupNotificationsByProduct
+                      ? 'discovery'
+                      : 'subtle'
+                  }
+                  spacing="compact"
+                  shape="circle"
+                />
+              </Tooltip>
 
-              <Tooltip content="Filters">
+              <Tooltip content="Filters" position="right">
                 <Button
                   iconBefore={(iconProps) => (
                     <FilterIcon
@@ -179,55 +191,55 @@ export const Sidebar: FC = () => {
       <Box paddingBlock="space.200">
         {isLoggedIn && (
           <Stack alignInline="center" space="space.150">
-            <IconButton
-              label="Refresh notifications"
-              title="Refresh notifications"
-              isTooltipDisabled={false}
-              icon={(iconProps) => (
-                <RefreshIcon
-                  {...iconProps}
-                  size="medium"
-                  primaryColor="white"
-                />
-              )}
-              appearance="subtle"
-              shape="circle"
-              onClick={() => refreshNotifications()}
-            />
+            <Tooltip content="Refresh notifications" position="right">
+              <IconButton
+                label="Refresh notifications"
+                icon={(iconProps) => (
+                  <RefreshIcon
+                    {...iconProps}
+                    size="medium"
+                    primaryColor="white"
+                  />
+                )}
+                appearance="subtle"
+                shape="circle"
+                onClick={() => refreshNotifications()}
+              />
+            </Tooltip>
+
+            <Tooltip content="Settings" position="right">
+              <IconButton
+                label="Settings"
+                icon={(iconProps) => (
+                  <SettingsIcon
+                    {...iconProps}
+                    size="medium"
+                    primaryColor="white"
+                  />
+                )}
+                appearance="subtle"
+                shape="circle"
+                onClick={() => toggleSettings()}
+              />
+            </Tooltip>
+          </Stack>
+        )}
 
+        {!isLoggedIn && (
+          <Tooltip content="Quit Atlasify" position="right">
             <IconButton
-              label="Settings"
-              title="Settings"
-              isTooltipDisabled={false}
+              label="Quit Atlasify"
               icon={(iconProps) => (
-                <SettingsIcon
+                <CrossCircleIcon
                   {...iconProps}
                   size="medium"
                   primaryColor="white"
                 />
               )}
-              appearance="subtle"
               shape="circle"
-              onClick={() => toggleSettings()}
+              onClick={() => quitApp()}
             />
-          </Stack>
-        )}
-
-        {!isLoggedIn && (
-          <IconButton
-            label="Quit Atlasify"
-            title="Quit Atlasify"
-            isTooltipDisabled={false}
-            icon={(iconProps) => (
-              <CrossCircleIcon
-                {...iconProps}
-                size="medium"
-                primaryColor="white"
-              />
-            )}
-            shape="circle"
-            onClick={() => quitApp()}
-          />
+          </Tooltip>
         )}
       </Box>
     </div>
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index ac107ec2..7faf8ba5 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
                   type="button"
                 >
                   <div
-                    aria-labelledby="27"
+                    aria-labelledby="38"
                     role="img"
                     style="display: inline-block; position: relative; outline: 0;"
                   >
@@ -43,7 +43,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
                     </span>
                     <span
                       hidden=""
-                      id="27"
+                      id="38"
                     >
                       Atlassian
                     </span>
@@ -76,113 +76,122 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
             <div
               class="css-gokkc4"
             >
-              <button
-                class=" css-a8hcye"
-                title="My pull requests"
-                type="button"
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    class="css-1ka881b"
-                    style="--logo-color: inherit; --logo-fill: currentColor;"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="32"
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="css-1ka881b"
+                      style="--logo-color: inherit; --logo-fill: currentColor;"
                     >
-                      
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="32"
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        
       
-                      <path
-                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                        fill="inherit"
-                      />
-                      
+                        <path
+                          d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                          fill="inherit"
+                        />
+                        
     
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    My pull requests
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      My pull requests
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Mark all account notifications as read"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-1wits42"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-1wits42"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                        r="5"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Mark all account notifications as read
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                          r="5"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Mark all account notifications as read
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="No notifications for account"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-snhnyn"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-snhnyn"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <path
-                        d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    No notifications for account
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      No notifications for account
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -236,7 +245,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
                 type="button"
               >
                 <div
-                  aria-labelledby="27"
+                  aria-labelledby="38"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -254,7 +263,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
                   </span>
                   <span
                     hidden=""
-                    id="27"
+                    id="38"
                   >
                     Atlassian
                   </span>
@@ -287,113 +296,122 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
           <div
             class="css-gokkc4"
           >
-            <button
-              class=" css-a8hcye"
-              title="My pull requests"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  class="css-1ka881b"
-                  style="--logo-color: inherit; --logo-fill: currentColor;"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="css-1ka881b"
+                    style="--logo-color: inherit; --logo-fill: currentColor;"
                   >
-                    
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
       
-                    <path
-                      d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                      fill="inherit"
-                    />
-                    
+                      <path
+                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                        fill="inherit"
+                      />
+                      
     
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  My pull requests
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    My pull requests
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Mark all account notifications as read"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark all account notifications as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark all account notifications as read
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="No notifications for account"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <path
-                      d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  No notifications for account
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <path
+                        d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    No notifications for account
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -504,7 +522,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                   type="button"
                 >
                   <div
-                    aria-labelledby="7"
+                    aria-labelledby="10"
                     role="img"
                     style="display: inline-block; position: relative; outline: 0;"
                   >
@@ -522,7 +540,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                     </span>
                     <span
                       hidden=""
-                      id="7"
+                      id="10"
                     >
                       Atlassian
                     </span>
@@ -555,113 +573,122 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
             <div
               class="css-gokkc4"
             >
-              <button
-                class=" css-a8hcye"
-                title="My pull requests"
-                type="button"
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    class="css-1ka881b"
-                    style="--logo-color: inherit; --logo-fill: currentColor;"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="32"
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="css-1ka881b"
+                      style="--logo-color: inherit; --logo-fill: currentColor;"
                     >
-                      
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="32"
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        
       
-                      <path
-                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                        fill="inherit"
-                      />
-                      
+                        <path
+                          d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                          fill="inherit"
+                        />
+                        
     
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    My pull requests
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      My pull requests
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Mark all account notifications as read"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-1wits42"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-1wits42"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                        r="5"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Mark all account notifications as read
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                          r="5"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Mark all account notifications as read
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Hide account notifications"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-snhnyn"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-snhnyn"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <path
-                        d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Hide account notifications
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Hide account notifications
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -679,7 +706,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 role="presentation"
               >
                 <div
-                  aria-labelledby="12"
+                  aria-labelledby="18"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -697,7 +724,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                   </span>
                   <span
                     hidden=""
-                    id="12"
+                    id="18"
                   >
                     atlasify-app
                   </span>
@@ -751,7 +778,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 class="flex flex-1 items-center gap-1 text-xs opacity-80"
               >
                 <div
-                  aria-labelledby="14"
+                  aria-labelledby="20"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -769,7 +796,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                   </span>
                   <span
                     hidden=""
-                    id="14"
+                    id="20"
                   >
                     Repository
                   </span>
@@ -810,42 +837,46 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
           <div
             class="css-1barwao"
           >
-            <button
-              class=" css-a8hcye"
-              title="Mark as read"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                title="Mark as read"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark as read
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
         <div
@@ -862,7 +893,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 role="presentation"
               >
                 <div
-                  aria-labelledby="17"
+                  aria-labelledby="24"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -880,7 +911,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                   </span>
                   <span
                     hidden=""
-                    id="17"
+                    id="24"
                   >
                     atlasify-app
                   </span>
@@ -934,7 +965,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 class="flex flex-1 items-center gap-1 text-xs opacity-80"
               >
                 <div
-                  aria-labelledby="19"
+                  aria-labelledby="26"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -952,7 +983,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                   </span>
                   <span
                     hidden=""
-                    id="19"
+                    id="26"
                   >
                     Repository
                   </span>
@@ -993,42 +1024,46 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
           <div
             class="css-1barwao"
           >
-            <button
-              class=" css-a8hcye"
-              title="Mark as read"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                title="Mark as read"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark as read
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1055,7 +1090,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 type="button"
               >
                 <div
-                  aria-labelledby="7"
+                  aria-labelledby="10"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -1073,7 +1108,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                   </span>
                   <span
                     hidden=""
-                    id="7"
+                    id="10"
                   >
                     Atlassian
                   </span>
@@ -1106,113 +1141,122 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
           <div
             class="css-gokkc4"
           >
-            <button
-              class=" css-a8hcye"
-              title="My pull requests"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  class="css-1ka881b"
-                  style="--logo-color: inherit; --logo-fill: currentColor;"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="css-1ka881b"
+                    style="--logo-color: inherit; --logo-fill: currentColor;"
                   >
-                    
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
       
-                    <path
-                      d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                      fill="inherit"
-                    />
-                    
+                      <path
+                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                        fill="inherit"
+                      />
+                      
     
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  My pull requests
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    My pull requests
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Mark all account notifications as read"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark all account notifications as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark all account notifications as read
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Hide account notifications"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <path
-                      d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Hide account notifications
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <path
+                        d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Hide account notifications
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1230,7 +1274,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
               role="presentation"
             >
               <div
-                aria-labelledby="12"
+                aria-labelledby="18"
                 role="img"
                 style="display: inline-block; position: relative; outline: 0;"
               >
@@ -1248,7 +1292,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 </span>
                 <span
                   hidden=""
-                  id="12"
+                  id="18"
                 >
                   atlasify-app
                 </span>
@@ -1302,7 +1346,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
               class="flex flex-1 items-center gap-1 text-xs opacity-80"
             >
               <div
-                aria-labelledby="14"
+                aria-labelledby="20"
                 role="img"
                 style="display: inline-block; position: relative; outline: 0;"
               >
@@ -1320,7 +1364,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 </span>
                 <span
                   hidden=""
-                  id="14"
+                  id="20"
                 >
                   Repository
                 </span>
@@ -1361,42 +1405,46 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         <div
           class="css-1barwao"
         >
-          <button
-            class=" css-a8hcye"
-            title="Mark as read"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-a8hcye"
+              title="Mark as read"
+              type="button"
             >
               <span
-                aria-hidden="true"
-                class="css-1wits42"
-                data-vc="icon-undefined"
-                style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                class=" css-1spmf3f"
               >
-                <svg
-                  height="24"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                  width="24"
+                <span
+                  aria-hidden="true"
+                  class="css-1wits42"
+                  data-vc="icon-undefined"
+                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                 >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    fill="currentcolor"
-                    fill-rule="evenodd"
-                    r="5"
-                  />
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Mark as read
+                  <svg
+                    height="24"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      fill="currentcolor"
+                      fill-rule="evenodd"
+                      r="5"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Mark as read
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
       <div
@@ -1413,7 +1461,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
               role="presentation"
             >
               <div
-                aria-labelledby="17"
+                aria-labelledby="24"
                 role="img"
                 style="display: inline-block; position: relative; outline: 0;"
               >
@@ -1431,7 +1479,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 </span>
                 <span
                   hidden=""
-                  id="17"
+                  id="24"
                 >
                   atlasify-app
                 </span>
@@ -1485,7 +1533,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
               class="flex flex-1 items-center gap-1 text-xs opacity-80"
             >
               <div
-                aria-labelledby="19"
+                aria-labelledby="26"
                 role="img"
                 style="display: inline-block; position: relative; outline: 0;"
               >
@@ -1503,7 +1551,7 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
                 </span>
                 <span
                   hidden=""
-                  id="19"
+                  id="26"
                 >
                   Repository
                 </span>
@@ -1544,42 +1592,46 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         <div
           class="css-1barwao"
         >
-          <button
-            class=" css-a8hcye"
-            title="Mark as read"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-a8hcye"
+              title="Mark as read"
+              type="button"
             >
               <span
-                aria-hidden="true"
-                class="css-1wits42"
-                data-vc="icon-undefined"
-                style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                class=" css-1spmf3f"
               >
-                <svg
-                  height="24"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                  width="24"
+                <span
+                  aria-hidden="true"
+                  class="css-1wits42"
+                  data-vc="icon-undefined"
+                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                 >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    fill="currentcolor"
-                    fill-rule="evenodd"
-                    r="5"
-                  />
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Mark as read
+                  <svg
+                    height="24"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      fill="currentcolor"
+                      fill-rule="evenodd"
+                      r="5"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Mark as read
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -1714,113 +1766,122 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
             <div
               class="css-gokkc4"
             >
-              <button
-                class=" css-a8hcye"
-                title="My pull requests"
-                type="button"
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    class="css-1ka881b"
-                    style="--logo-color: inherit; --logo-fill: currentColor;"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="32"
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="css-1ka881b"
+                      style="--logo-color: inherit; --logo-fill: currentColor;"
                     >
-                      
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="32"
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        
       
-                      <path
-                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                        fill="inherit"
-                      />
-                      
+                        <path
+                          d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                          fill="inherit"
+                        />
+                        
     
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    My pull requests
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      My pull requests
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Mark all account notifications as read"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-1wits42"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-1wits42"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                        r="5"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Mark all account notifications as read
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                          r="5"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Mark all account notifications as read
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Hide account notifications"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-snhnyn"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-snhnyn"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <path
-                        d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Hide account notifications
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Hide account notifications
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -1902,113 +1963,122 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
           <div
             class="css-gokkc4"
           >
-            <button
-              class=" css-a8hcye"
-              title="My pull requests"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  class="css-1ka881b"
-                  style="--logo-color: inherit; --logo-fill: currentColor;"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="css-1ka881b"
+                    style="--logo-color: inherit; --logo-fill: currentColor;"
                   >
-                    
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
       
-                    <path
-                      d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                      fill="inherit"
-                    />
-                    
+                      <path
+                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                        fill="inherit"
+                      />
+                      
     
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  My pull requests
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    My pull requests
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Mark all account notifications as read"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark all account notifications as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark all account notifications as read
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Hide account notifications"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <path
-                      d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Hide account notifications
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <path
+                        d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Hide account notifications
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2096,7 +2166,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
                   type="button"
                 >
                   <div
-                    aria-labelledby="22"
+                    aria-labelledby="30"
                     role="img"
                     style="display: inline-block; position: relative; outline: 0;"
                   >
@@ -2114,7 +2184,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
                     </span>
                     <span
                       hidden=""
-                      id="22"
+                      id="30"
                     >
                       Atlassian
                     </span>
@@ -2147,113 +2217,122 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
             <div
               class="css-gokkc4"
             >
-              <button
-                class=" css-a8hcye"
-                title="My pull requests"
-                type="button"
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    class="css-1ka881b"
-                    style="--logo-color: inherit; --logo-fill: currentColor;"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="32"
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="css-1ka881b"
+                      style="--logo-color: inherit; --logo-fill: currentColor;"
                     >
-                      
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="32"
+                        viewBox="0 0 32 32"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        
       
-                      <path
-                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                        fill="inherit"
-                      />
-                      
+                        <path
+                          d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                          fill="inherit"
+                        />
+                        
     
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    My pull requests
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      My pull requests
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Mark all account notifications as read"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-1wits42"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-1wits42"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                        r="5"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Mark all account notifications as read
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                          r="5"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Mark all account notifications as read
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="No notifications for account"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-snhnyn"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-snhnyn"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <path
-                        d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    No notifications for account
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      No notifications for account
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -2302,7 +2381,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
                 type="button"
               >
                 <div
-                  aria-labelledby="22"
+                  aria-labelledby="30"
                   role="img"
                   style="display: inline-block; position: relative; outline: 0;"
                 >
@@ -2320,7 +2399,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
                   </span>
                   <span
                     hidden=""
-                    id="22"
+                    id="30"
                   >
                     Atlassian
                   </span>
@@ -2353,113 +2432,122 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
           <div
             class="css-gokkc4"
           >
-            <button
-              class=" css-a8hcye"
-              title="My pull requests"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  class="css-1ka881b"
-                  style="--logo-color: inherit; --logo-fill: currentColor;"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="css-1ka881b"
+                    style="--logo-color: inherit; --logo-fill: currentColor;"
                   >
-                    
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      
       
-                    <path
-                      d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
-                      fill="inherit"
-                    />
-                    
+                      <path
+                        d="m25.586 15.819-1.618 9.885c-.106.598-.528.95-1.126.95H9.122c-.598 0-1.02-.352-1.126-.95L5.146 8.08c-.105-.598.212-.985.775-.985h20.123c.562 0 .88.387.773.985l-.773 4.644c-.106.668-.493.95-1.126.95H12.816c-.176 0-.282.105-.246.316l.95 5.84c.035.14.14.246.281.246h4.362c.141 0 .246-.105.282-.246l.668-4.222c.07-.527.422-.738.915-.738h4.75c.703 0 .914.351.808.95"
+                        fill="inherit"
+                      />
+                      
     
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  My pull requests
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    My pull requests
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Mark all account notifications as read"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark all account notifications as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark all account notifications as read
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="No notifications for account"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <path
-                      d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  No notifications for account
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <path
+                        d="M13.706 9.698a.99.99 0 0 0 0-1.407 1.01 1.01 0 0 0-1.419 0l-2.965 2.94a1.09 1.09 0 0 0 0 1.548l2.955 2.93a1.01 1.01 0 0 0 1.42 0 .99.99 0 0 0 0-1.407l-2.318-2.297z"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    No notifications for account
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 20fe3248..050036db 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -150,42 +150,46 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         <div
           class="css-1barwao"
         >
-          <button
-            class=" css-a8hcye"
-            title="Mark as read"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-a8hcye"
+              title="Mark as read"
+              type="button"
             >
               <span
-                aria-hidden="true"
-                class="css-1wits42"
-                data-vc="icon-undefined"
-                style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                class=" css-1spmf3f"
               >
-                <svg
-                  height="24"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                  width="24"
+                <span
+                  aria-hidden="true"
+                  class="css-1wits42"
+                  data-vc="icon-undefined"
+                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                 >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    fill="currentcolor"
-                    fill-rule="evenodd"
-                    r="5"
-                  />
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Mark as read
+                  <svg
+                    height="24"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      fill="currentcolor"
+                      fill-rule="evenodd"
+                      r="5"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Mark as read
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -336,42 +340,46 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
       <div
         class="css-1barwao"
       >
-        <button
-          class=" css-a8hcye"
-          title="Mark as read"
-          type="button"
+        <div
+          role="presentation"
         >
-          <span
-            class=" css-1spmf3f"
+          <button
+            class=" css-a8hcye"
+            title="Mark as read"
+            type="button"
           >
             <span
-              aria-hidden="true"
-              class="css-1wits42"
-              data-vc="icon-undefined"
-              style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+              class=" css-1spmf3f"
             >
-              <svg
-                height="24"
-                role="presentation"
-                viewBox="0 0 24 24"
-                width="24"
+              <span
+                aria-hidden="true"
+                class="css-1wits42"
+                data-vc="icon-undefined"
+                style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
               >
-                <circle
-                  cx="12"
-                  cy="12"
-                  fill="currentcolor"
-                  fill-rule="evenodd"
-                  r="5"
-                />
-              </svg>
-            </span>
-            <span
-              class="css-b5o75w"
-            >
-              Mark as read
+                <svg
+                  height="24"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    fill="currentcolor"
+                    fill-rule="evenodd"
+                    r="5"
+                  />
+                </svg>
+              </span>
+              <span
+                class="css-b5o75w"
+              >
+                Mark as read
+              </span>
             </span>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>,
@@ -448,7 +456,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
               role="presentation"
             >
               <div
-                aria-labelledby="7"
+                aria-labelledby="8"
                 role="img"
                 style="display: inline-block; position: relative; outline: 0;"
               >
@@ -466,7 +474,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
                 </span>
                 <span
                   hidden=""
-                  id="7"
+                  id="8"
                 >
                   atlasify-app
                 </span>
@@ -520,7 +528,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
               class="flex flex-1 items-center gap-1 text-xs opacity-80"
             >
               <div
-                aria-labelledby="9"
+                aria-labelledby="10"
                 role="img"
                 style="display: inline-block; position: relative; outline: 0;"
               >
@@ -538,7 +546,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
                 </span>
                 <span
                   hidden=""
-                  id="9"
+                  id="10"
                 >
                   Repository
                 </span>
@@ -579,42 +587,46 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         <div
           class="css-1barwao"
         >
-          <button
-            class=" css-a8hcye"
-            title="Mark as read"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-a8hcye"
+              title="Mark as read"
+              type="button"
             >
               <span
-                aria-hidden="true"
-                class="css-1wits42"
-                data-vc="icon-undefined"
-                style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                class=" css-1spmf3f"
               >
-                <svg
-                  height="24"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                  width="24"
+                <span
+                  aria-hidden="true"
+                  class="css-1wits42"
+                  data-vc="icon-undefined"
+                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                 >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    fill="currentcolor"
-                    fill-rule="evenodd"
-                    r="5"
-                  />
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Mark as read
+                  <svg
+                    height="24"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      fill="currentcolor"
+                      fill-rule="evenodd"
+                      r="5"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Mark as read
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -634,7 +646,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             role="presentation"
           >
             <div
-              aria-labelledby="7"
+              aria-labelledby="8"
               role="img"
               style="display: inline-block; position: relative; outline: 0;"
             >
@@ -652,7 +664,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
               </span>
               <span
                 hidden=""
-                id="7"
+                id="8"
               >
                 atlasify-app
               </span>
@@ -706,7 +718,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             class="flex flex-1 items-center gap-1 text-xs opacity-80"
           >
             <div
-              aria-labelledby="9"
+              aria-labelledby="10"
               role="img"
               style="display: inline-block; position: relative; outline: 0;"
             >
@@ -724,7 +736,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
               </span>
               <span
                 hidden=""
-                id="9"
+                id="10"
               >
                 Repository
               </span>
@@ -765,42 +777,46 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
       <div
         class="css-1barwao"
       >
-        <button
-          class=" css-a8hcye"
-          title="Mark as read"
-          type="button"
+        <div
+          role="presentation"
         >
-          <span
-            class=" css-1spmf3f"
+          <button
+            class=" css-a8hcye"
+            title="Mark as read"
+            type="button"
           >
             <span
-              aria-hidden="true"
-              class="css-1wits42"
-              data-vc="icon-undefined"
-              style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+              class=" css-1spmf3f"
             >
-              <svg
-                height="24"
-                role="presentation"
-                viewBox="0 0 24 24"
-                width="24"
+              <span
+                aria-hidden="true"
+                class="css-1wits42"
+                data-vc="icon-undefined"
+                style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
               >
-                <circle
-                  cx="12"
-                  cy="12"
-                  fill="currentcolor"
-                  fill-rule="evenodd"
-                  r="5"
-                />
-              </svg>
-            </span>
-            <span
-              class="css-b5o75w"
-            >
-              Mark as read
+                <svg
+                  height="24"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    fill="currentcolor"
+                    fill-rule="evenodd"
+                    r="5"
+                  />
+                </svg>
+              </span>
+              <span
+                class="css-b5o75w"
+              >
+                Mark as read
+              </span>
             </span>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>,
diff --git a/src/components/__snapshots__/ProductNotifications.test.tsx.snap b/src/components/__snapshots__/ProductNotifications.test.tsx.snap
index abe22edf..36c87b88 100644
--- a/src/components/__snapshots__/ProductNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/ProductNotifications.test.tsx.snap
@@ -69,76 +69,82 @@ exports[`components/ProductNotifications.tsx should render itself & its children
             <div
               class="css-gokkc4"
             >
-              <button
-                class=" css-a8hcye"
-                title="Mark all product notifications as read"
-                type="button"
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-1wits42"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-1wits42"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                        r="5"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Mark all product notifications as read
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                          r="5"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Mark all product notifications as read
+                    </span>
                   </span>
-                </span>
-              </button>
-              <button
-                class=" css-a8hcye"
-                title="Hide product notifications"
-                type="button"
+                </button>
+              </div>
+              <div
+                role="presentation"
               >
-                <span
-                  class=" css-1spmf3f"
+                <button
+                  class=" css-a8hcye"
+                  type="button"
                 >
                   <span
-                    aria-hidden="true"
-                    class="css-snhnyn"
-                    data-vc="icon-undefined"
-                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                    class=" css-1spmf3f"
                   >
-                    <svg
-                      height="24"
-                      role="presentation"
-                      viewBox="0 0 24 24"
-                      width="24"
+                    <span
+                      aria-hidden="true"
+                      class="css-snhnyn"
+                      data-vc="icon-undefined"
+                      style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                     >
-                      <path
-                        d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
-                        fill="currentcolor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="css-b5o75w"
-                  >
-                    Hide product notifications
+                      <svg
+                        height="24"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                        width="24"
+                      >
+                        <path
+                          d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
+                          fill="currentcolor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="css-b5o75w"
+                    >
+                      Hide product notifications
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -216,76 +222,82 @@ exports[`components/ProductNotifications.tsx should render itself & its children
           <div
             class="css-gokkc4"
           >
-            <button
-              class=" css-a8hcye"
-              title="Mark all product notifications as read"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-1wits42"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-1wits42"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                      r="5"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Mark all product notifications as read
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                        r="5"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Mark all product notifications as read
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-a8hcye"
-              title="Hide product notifications"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-a8hcye"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <path
-                      d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Hide product notifications
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <path
+                        d="M8.292 10.293a1.01 1.01 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Hide product notifications
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 4d517073..5e80cbaf 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -14,54 +14,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           <div
             class="mx-auto my-3"
           >
-            <button
-              class=" css-1hmr5rx"
-              title="Home"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-1hmr5rx"
+                title="Home"
+                type="button"
               >
                 <span
-                  class="css-12mte9y"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="css-12mte9y"
                   >
-                    
-    
-                    <g
-                      fill="#FFFFFF"
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
                       
+    
+                      <g
+                        fill="#FFFFFF"
+                      >
+                        
       
-                      <path
-                        d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
-                      />
-                      
+                        <path
+                          d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
+                        />
+                        
       
-                      <path
-                        d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
-                      />
-                      
+                        <path
+                          d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
+                        />
+                        
     
-                    </g>
-                    
+                      </g>
+                      
   
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Home
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Home
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
           <div
             class="css-2k1qcz"
@@ -112,53 +116,56 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         <div
           class="css-sitfir"
         >
-          <button
-            class=" css-1lwcrd3"
-            title="Quit Atlasify"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-1lwcrd3"
+              type="button"
             >
               <span
-                aria-hidden="true"
-                class="css-1afrefi"
-                data-vc="icon-undefined"
-                style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                class=" css-1spmf3f"
               >
-                <svg
-                  height="24"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                  width="24"
+                <span
+                  aria-hidden="true"
+                  class="css-1afrefi"
+                  data-vc="icon-undefined"
+                  style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                 >
-                  <g
-                    fill-rule="evenodd"
+                  <svg
+                    height="24"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      r="10"
-                    />
-                    <path
-                      d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
-                      fill="inherit"
-                    />
-                    <path
-                      d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
-                      fill="inherit"
-                    />
-                  </g>
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Quit Atlasify
+                    <g
+                      fill-rule="evenodd"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        r="10"
+                      />
+                      <path
+                        d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
+                        fill="inherit"
+                      />
+                      <path
+                        d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
+                        fill="inherit"
+                      />
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Quit Atlasify
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -173,54 +180,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         <div
           class="mx-auto my-3"
         >
-          <button
-            class=" css-1hmr5rx"
-            title="Home"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-1hmr5rx"
+              title="Home"
+              type="button"
             >
               <span
-                class="css-12mte9y"
+                class=" css-1spmf3f"
               >
-                <svg
-                  aria-hidden="true"
-                  fill="none"
-                  focusable="false"
-                  height="32"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
+                <span
+                  class="css-12mte9y"
                 >
-                  
-    
-                  <g
-                    fill="#FFFFFF"
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     
+    
+                    <g
+                      fill="#FFFFFF"
+                    >
+                      
       
-                    <path
-                      d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
-                    />
-                    
+                      <path
+                        d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
+                      />
+                      
       
-                    <path
-                      d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
-                    />
-                    
+                      <path
+                        d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
+                      />
+                      
     
-                  </g>
-                  
+                    </g>
+                    
   
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Home
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Home
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
         <div
           class="css-2k1qcz"
@@ -271,53 +282,56 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
       <div
         class="css-sitfir"
       >
-        <button
-          class=" css-1lwcrd3"
-          title="Quit Atlasify"
-          type="button"
+        <div
+          role="presentation"
         >
-          <span
-            class=" css-1spmf3f"
+          <button
+            class=" css-1lwcrd3"
+            type="button"
           >
             <span
-              aria-hidden="true"
-              class="css-1afrefi"
-              data-vc="icon-undefined"
-              style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+              class=" css-1spmf3f"
             >
-              <svg
-                height="24"
-                role="presentation"
-                viewBox="0 0 24 24"
-                width="24"
+              <span
+                aria-hidden="true"
+                class="css-1afrefi"
+                data-vc="icon-undefined"
+                style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
               >
-                <g
-                  fill-rule="evenodd"
+                <svg
+                  height="24"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                  width="24"
                 >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    fill="currentcolor"
-                    r="10"
-                  />
-                  <path
-                    d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
-                    fill="inherit"
-                  />
-                  <path
-                    d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
-                    fill="inherit"
-                  />
-                </g>
-              </svg>
-            </span>
-            <span
-              class="css-b5o75w"
-            >
-              Quit Atlasify
+                  <g
+                    fill-rule="evenodd"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      fill="currentcolor"
+                      r="10"
+                    />
+                    <path
+                      d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
+                      fill="inherit"
+                    />
+                    <path
+                      d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
+                      fill="inherit"
+                    />
+                  </g>
+                </svg>
+              </span>
+              <span
+                class="css-b5o75w"
+              >
+                Quit Atlasify
+              </span>
             </span>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>,
@@ -389,54 +403,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           <div
             class="mx-auto my-3"
           >
-            <button
-              class=" css-1hmr5rx"
-              title="Home"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-1hmr5rx"
+                title="Home"
+                type="button"
               >
                 <span
-                  class="css-12mte9y"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    aria-hidden="true"
-                    fill="none"
-                    focusable="false"
-                    height="32"
-                    viewBox="0 0 32 32"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="css-12mte9y"
                   >
-                    
-    
-                    <g
-                      fill="#FFFFFF"
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="32"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
                       
+    
+                      <g
+                        fill="#FFFFFF"
+                      >
+                        
       
-                      <path
-                        d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
-                      />
-                      
+                        <path
+                          d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
+                        />
+                        
       
-                      <path
-                        d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
-                      />
-                      
+                        <path
+                          d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
+                        />
+                        
     
-                    </g>
-                    
+                      </g>
+                      
   
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Home
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Home
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
           <div
             class="css-2k1qcz"
@@ -487,53 +505,56 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         <div
           class="css-sitfir"
         >
-          <button
-            class=" css-1lwcrd3"
-            title="Quit Atlasify"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-1lwcrd3"
+              type="button"
             >
               <span
-                aria-hidden="true"
-                class="css-1afrefi"
-                data-vc="icon-undefined"
-                style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                class=" css-1spmf3f"
               >
-                <svg
-                  height="24"
-                  role="presentation"
-                  viewBox="0 0 24 24"
-                  width="24"
+                <span
+                  aria-hidden="true"
+                  class="css-1afrefi"
+                  data-vc="icon-undefined"
+                  style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                 >
-                  <g
-                    fill-rule="evenodd"
+                  <svg
+                    height="24"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <circle
-                      cx="12"
-                      cy="12"
-                      fill="currentcolor"
-                      r="10"
-                    />
-                    <path
-                      d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
-                      fill="inherit"
-                    />
-                    <path
-                      d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
-                      fill="inherit"
-                    />
-                  </g>
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Quit Atlasify
+                    <g
+                      fill-rule="evenodd"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        fill="currentcolor"
+                        r="10"
+                      />
+                      <path
+                        d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
+                        fill="inherit"
+                      />
+                      <path
+                        d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
+                        fill="inherit"
+                      />
+                    </g>
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Quit Atlasify
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -548,54 +569,58 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         <div
           class="mx-auto my-3"
         >
-          <button
-            class=" css-1hmr5rx"
-            title="Home"
-            type="button"
+          <div
+            role="presentation"
           >
-            <span
-              class=" css-1spmf3f"
+            <button
+              class=" css-1hmr5rx"
+              title="Home"
+              type="button"
             >
               <span
-                class="css-12mte9y"
+                class=" css-1spmf3f"
               >
-                <svg
-                  aria-hidden="true"
-                  fill="none"
-                  focusable="false"
-                  height="32"
-                  viewBox="0 0 32 32"
-                  xmlns="http://www.w3.org/2000/svg"
+                <span
+                  class="css-12mte9y"
                 >
-                  
-    
-                  <g
-                    fill="#FFFFFF"
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     
+    
+                    <g
+                      fill="#FFFFFF"
+                    >
+                      
       
-                    <path
-                      d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
-                    />
-                    
+                      <path
+                        d="M16 28.532c-6.656 0-12.068-5.412-12.068-12.068S9.344 4.396 16 4.396v1.921c-5.597 0-10.146 4.549-10.146 10.146S10.403 26.609 16 26.609zm0 0v-1.921c5.597 0 10.146-4.549 10.146-10.146h1.921c0 6.656-5.412 12.068-12.068 12.068zm12.068-12.068h-1.921c0-5.597-4.549-10.146-10.146-10.146V4.397c6.656 0 12.068 5.412 12.068 12.068zm-6.928 3.695c-1.28-.251-2.292-.706-3.973-1.467-.464-.204-.974-.436-1.559-.696a59 59 0 0 0-1.003-.436c-2.534-1.123-3.926-1.736-5.634-1.736-1.198 0-2.098.325-2.6.937a1.72 1.72 0 0 0-.38 1.448l-1.885.362a3.67 3.67 0 0 1 .78-3.035c.613-.743 1.82-1.634 4.085-1.634 2.116 0 3.824.761 6.414 1.903.316.14.641.288.994.436.594.26 1.114.492 1.578.706 1.606.724 2.488 1.123 3.555 1.327l-.371 1.885Zm1.877.185c-.64 0-1.253-.056-1.875-.185l.371-1.885c.502.102.994.149 1.504.149 1.188 0 2.089-.298 2.609-.864s.539-1.253.51-1.615l1.913-.167c.102 1.169-.251 2.265-1.003 3.082-.622.677-1.82 1.485-4.029 1.485M16 28.532v-1.921c2.757 0 4.4-2.813 4.4-7.52s-1.67-8.652-5.096-12.3l1.402-1.318c3.778 4.02 5.616 8.476 5.616 13.618 0 5.821-2.423 9.441-6.322 9.441m-.001 0c-4.15 0-6.526-3.379-6.526-9.273 0-6.879 3.008-10.722 5.82-13.776l1.412 1.299c-3.277 3.565-5.31 6.888-5.31 12.476 0 6.08 2.506 7.352 4.604 7.352z"
+                      />
+                      
       
-                    <path
-                      d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
-                    />
-                    
+                      <path
+                        d="M10.857 17.467a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494m10.385 3.871a2.247 2.247 0 1 0 0-4.494 2.247 2.247 0 0 0 0 4.494M15.998 7.96a2.247 2.247 0 1 0 0-4.493 2.247 2.247 0 0 0 0 4.494Z"
+                      />
+                      
     
-                  </g>
-                  
+                    </g>
+                    
   
-                </svg>
-              </span>
-              <span
-                class="css-b5o75w"
-              >
-                Home
+                  </svg>
+                </span>
+                <span
+                  class="css-b5o75w"
+                >
+                  Home
+                </span>
               </span>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
         <div
           class="css-2k1qcz"
@@ -646,53 +671,56 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
       <div
         class="css-sitfir"
       >
-        <button
-          class=" css-1lwcrd3"
-          title="Quit Atlasify"
-          type="button"
+        <div
+          role="presentation"
         >
-          <span
-            class=" css-1spmf3f"
+          <button
+            class=" css-1lwcrd3"
+            type="button"
           >
             <span
-              aria-hidden="true"
-              class="css-1afrefi"
-              data-vc="icon-undefined"
-              style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+              class=" css-1spmf3f"
             >
-              <svg
-                height="24"
-                role="presentation"
-                viewBox="0 0 24 24"
-                width="24"
+              <span
+                aria-hidden="true"
+                class="css-1afrefi"
+                data-vc="icon-undefined"
+                style="--icon-primary-color: white; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
               >
-                <g
-                  fill-rule="evenodd"
+                <svg
+                  height="24"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                  width="24"
                 >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    fill="currentcolor"
-                    r="10"
-                  />
-                  <path
-                    d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
-                    fill="inherit"
-                  />
-                  <path
-                    d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
-                    fill="inherit"
-                  />
-                </g>
-              </svg>
-            </span>
-            <span
-              class="css-b5o75w"
-            >
-              Quit Atlasify
+                  <g
+                    fill-rule="evenodd"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      fill="currentcolor"
+                      r="10"
+                    />
+                    <path
+                      d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
+                      fill="inherit"
+                    />
+                    <path
+                      d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
+                      fill="inherit"
+                    />
+                  </g>
+                </svg>
+              </span>
+              <span
+                class="css-b5o75w"
+              >
+                Quit Atlasify
+              </span>
             </span>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>,
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
index f8302052..803ab8de 100644
--- a/src/components/settings/SettingsFooter.tsx
+++ b/src/components/settings/SettingsFooter.tsx
@@ -30,7 +30,7 @@ export const SettingsFooter: FC = () => {
       <Box padding="space.050">
         <Stack>
           <Inline grow="fill" spread="space-between">
-            <Tooltip content="View Atlasify release notes">
+            <Tooltip content="View Atlasify release notes" position="top">
               <Button
                 title="View Atlasify release notes"
                 appearance="subtle"
@@ -39,23 +39,28 @@ export const SettingsFooter: FC = () => {
                 Atlasify {appVersion}
               </Button>
             </Tooltip>
+
             <Inline space="space.200">
-              <IconButton
-                label="Accounts"
-                title="Accounts"
-                icon={PeopleGroupIcon}
-                appearance="subtle"
-                shape="circle"
-                onClick={() => navigate('/accounts')}
-              />
-              <IconButton
-                label="Quit Atlasify"
-                title="Quit Atlasify"
-                icon={CrossCircleIcon}
-                appearance="subtle"
-                shape="circle"
-                onClick={() => quitApp()}
-              />
+              <Tooltip content="Accounts" position="top">
+                <IconButton
+                  label="Accounts"
+                  title="Accounts"
+                  icon={PeopleGroupIcon}
+                  appearance="subtle"
+                  shape="circle"
+                  onClick={() => navigate('/accounts')}
+                />
+              </Tooltip>
+              <Tooltip content="Quit Atlasify" position="top">
+                <IconButton
+                  label="Quit Atlasify"
+                  title="Quit Atlasify"
+                  icon={CrossCircleIcon}
+                  appearance="subtle"
+                  shape="circle"
+                  onClick={() => quitApp()}
+                />
+              </Tooltip>
             </Inline>
           </Inline>
         </Stack>
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 07b5ed41..acb5d378 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -904,98 +904,106 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           <div
             class="css-srvzt9"
           >
-            <button
-              class=" css-1hmr5rx"
-              title="Accounts"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-1hmr5rx"
+                title="Accounts"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <g
-                      fill="currentcolor"
-                      fill-rule="evenodd"
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <path
-                        d="M8.13 10H4a2 2 0 0 0-2 2v3.73c0 1.31 1.87 2.05 4 2.23V15a3 3 0 0 1 3-3h.35a4 4 0 0 1-1.23-2m7.75 0H20c1.11 0 2 .89 2 2v3.73c0 1.31-1.87 2.05-4 2.23V15a3 3 0 0 0-3-3h-.35a4 4 0 0 0 1.23-2M9.97 5.55a3 3 0 1 0-1.96 3.27 4 4 0 0 1 1.96-3.27M16 8.83a3 3 0 1 0-1.96-3.28A4 4 0 0 1 16 8.83"
-                      />
-                      <path
-                        d="M7 15c0-1.105.887-2 2-2h6c1.105 0 2 .885 2 2v3.73c0 3.027-10 3.027-10 0z"
-                      />
-                      <circle
-                        cx="12"
-                        cy="9"
-                        r="3"
-                      />
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Accounts
+                      <g
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      >
+                        <path
+                          d="M8.13 10H4a2 2 0 0 0-2 2v3.73c0 1.31 1.87 2.05 4 2.23V15a3 3 0 0 1 3-3h.35a4 4 0 0 1-1.23-2m7.75 0H20c1.11 0 2 .89 2 2v3.73c0 1.31-1.87 2.05-4 2.23V15a3 3 0 0 0-3-3h-.35a4 4 0 0 0 1.23-2M9.97 5.55a3 3 0 1 0-1.96 3.27 4 4 0 0 1 1.96-3.27M16 8.83a3 3 0 1 0-1.96-3.28A4 4 0 0 1 16 8.83"
+                        />
+                        <path
+                          d="M7 15c0-1.105.887-2 2-2h6c1.105 0 2 .885 2 2v3.73c0 3.027-10 3.027-10 0z"
+                        />
+                        <circle
+                          cx="12"
+                          cy="9"
+                          r="3"
+                        />
+                      </g>
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Accounts
+                  </span>
                 </span>
-              </span>
-            </button>
-            <button
-              class=" css-1hmr5rx"
-              title="Quit Atlasify"
-              type="button"
+              </button>
+            </div>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-1hmr5rx"
+                title="Quit Atlasify"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <g
-                      fill-rule="evenodd"
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        r="10"
-                      />
-                      <path
-                        d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
-                        fill="inherit"
-                      />
-                      <path
-                        d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
-                        fill="inherit"
-                      />
-                    </g>
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Quit Atlasify
+                      <g
+                        fill-rule="evenodd"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          r="10"
+                        />
+                        <path
+                          d="m13.477 9.113-4.36 4.386a1 1 0 1 0 1.418 1.41l4.36-4.386a1 1 0 0 0-1.418-1.41"
+                          fill="inherit"
+                        />
+                        <path
+                          d="m9.084 10.501 4.358 4.377a1 1 0 1 0 1.418-1.411L10.5 9.09a1 1 0 0 0-1.417 1.411"
+                          fill="inherit"
+                        />
+                      </g>
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Quit Atlasify
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>