Fix API access method cell items alignment

mullvad · Oct 23, 2024 · 0aaf3f1 · 0aaf3f1
1 parent acfd6f4
commit 0aaf3f1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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) => ({