From 0aaf3f1df01eb50aaeb1d29ec896fde50d45e91e Mon Sep 17 00:00:00 2001
From: Oskar <oskar@mullvad.net>
Date: Fri, 18 Oct 2024 15:32:02 +0200
Subject: [PATCH] Fix API access method cell items alignment

---
 gui/src/renderer/components/ApiAccessMethods.tsx | 2 ++
 gui/src/renderer/components/ContextMenu.tsx      | 2 ++
 gui/src/renderer/components/cell/Label.tsx       | 6 +++++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/gui/src/renderer/components/ApiAccessMethods.tsx b/gui/src/renderer/components/ApiAccessMethods.tsx
index 8b88e97edce0..f12e4835f16c 100644
--- a/gui/src/renderer/components/ApiAccessMethods.tsx
+++ b/gui/src/renderer/components/ApiAccessMethods.tsx
@@ -36,6 +36,8 @@ import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from
 import { SmallButton, SmallButtonColor, SmallButtonGroup } from './SmallButton';
 
 const StyledContextMenuButton = styled(Cell.Icon)({
+  alignItems: 'center',
+  justifyContent: 'center',
   marginRight: '8px',
 });
 
diff --git a/gui/src/renderer/components/ContextMenu.tsx b/gui/src/renderer/components/ContextMenu.tsx
index fd84a8f0d921..2e01c9375f6e 100644
--- a/gui/src/renderer/components/ContextMenu.tsx
+++ b/gui/src/renderer/components/ContextMenu.tsx
@@ -36,6 +36,8 @@ const menuContext = React.createContext<MenuContext>({
 const StyledMenuContainer = styled.div({
   position: 'relative',
   padding: '8px 4px',
+  display: 'flex',
+  justifyContent: 'center',
 });
 
 export function ContextMenuContainer(props: React.PropsWithChildren) {
diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
index 1115edc82945..b2b37c1e4ce3 100644
--- a/gui/src/renderer/components/cell/Label.tsx
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -15,11 +15,15 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
   textAlign: 'left',
 
   [`${LabelContainer} &&`]: {
-    marginTop: '5px',
+    marginTop: '0px',
     marginBottom: 0,
     height: '20px',
     lineHeight: '20px',
   },
+
+  [`${LabelContainer}:has(${StyledSubLabel}) &&`]: {
+    marginTop: '5px',
+  },
 }));
 
 const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({