From 4f2b055ee0552faae0a32a9e212375d1540b5c57 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:34:33 +0530
Subject: [PATCH] fix: Minor bugs in UI (#7891)

## Description

- This PR fixed #7890

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/RecordShowActionMenuBarEntry.tsx           | 8 ++++++--
 .../components/RecordBoardColumnHeader.tsx                | 2 +-
 .../components/RecordTableCellButton.tsx                  | 5 +++++
 .../modules/ui/field/input/components/CurrencyInput.tsx   | 2 +-
 .../currency/components/CurrencyPickerDropdownSelect.tsx  | 2 +-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
index debc175b7c6d..db751adaadc7 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
@@ -26,7 +26,11 @@ const StyledButton = styled.div<{ accent: MenuItemAccent }>`
     background: ${({ theme, accent }) =>
       accent === 'danger'
         ? theme.background.danger
-        : theme.background.tertiary};
+        : theme.background.transparent.light};
+  }
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding: ${({ theme }) => theme.spacing(1)};
   }
 `;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
index f431954bfcab..6c6590ec0545 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
@@ -33,7 +33,7 @@ const StyledNumChildren = styled.div`
   height: 24px;
   justify-content: center;
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
-  width: 16px;
+  width: 22px;
 `;
 
 const StyledHeaderActions = styled.div`
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
index 101c8cb6584e..49574a0c531f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
@@ -3,10 +3,15 @@ import {
   AnimatedContainer,
   FloatingIconButton,
   IconComponent,
+  MOBILE_VIEWPORT,
 } from 'twenty-ui';
 
 const StyledButtonContainer = styled.div`
   margin: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    position: relative;
+    right: 7px;
+  }
 `;
 
 type RecordTableCellButtonProps = {
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
index 052f47954202..7f4afdb266bd 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -15,7 +15,7 @@ export const StyledIMaskInput = styled(IMaskInput)<StyledInputProps>`
   margin: 0;
   ${TEXT_INPUT_STYLE}
   width: 100%;
-  padding: ${({ theme }) => `${theme.spacing(0)} ${theme.spacing(1)}`};
+  padding: ${({ theme }) => `${theme.spacing(0)} ${theme.spacing(1.5)}`};
 `;
 
 const StyledContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
index 98f4348f0f97..7dfeaebe7a56 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
@@ -33,7 +33,7 @@ export const CurrencyPickerDropdownSelect = ({
   );
 
   return (
-    <DropdownMenu width="200px" disableBlur>
+    <DropdownMenu width="240px" disableBlur>
       <DropdownMenuSearchInput
         value={searchFilter}
         onChange={(event) => setSearchFilter(event.target.value)}