admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Floating inputs border radius fix (#9237)

Browse Source 
closes #9230
This commit is contained in:
nitin
2024-12-26 14:18:23 +05:30
committed by GitHub
parent 1f789a8b95
commit 29d364fa7b
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
View File

@ -50,7 +50,11 @@ export const RecordInlineCellEditMode = ({
data-testid="inline-cell-edit-mode-container" data-testid="inline-cell-edit-mode-container"
> >
{createPortal( {createPortal(
<OverlayContainer ref={refs.setFloating} style={floatingStyles}> <OverlayContainer
ref={refs.setFloating}
style={floatingStyles}
borderRadius="sm"
>
{children} {children}
</OverlayContainer>, </OverlayContainer>,
document.body, document.body,

6
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
View File

@ -40,7 +40,11 @@ export const RecordTableCellEditMode = ({
ref={refs.setReference} ref={refs.setReference}
data-testid="editable-cell-edit-mode-container" data-testid="editable-cell-edit-mode-container"
> >
<OverlayContainer ref={refs.setFloating} style={floatingStyles}> <OverlayContainer
ref={refs.setFloating}
style={floatingStyles}
borderRadius="sm"
>
{children} {children}
</OverlayContainer> </OverlayContainer>
</StyledEditableCellEditModeContainer> </StyledEditableCellEditModeContainer>

7
packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
View File

@ -1,14 +1,17 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
// eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled // eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled
export const OverlayContainer = styled.div` export const OverlayContainer = styled.div<{
borderRadius?: 'sm' | 'md';
}>`
align-items: center; align-items: center;
display: flex; display: flex;
backdrop-filter: ${({ theme }) => theme.blur.medium}; backdrop-filter: ${({ theme }) => theme.blur.medium};
width: fit-content; width: fit-content;
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme, borderRadius }) =>
theme.border.radius[borderRadius ?? 'md']};
background: ${({ theme }) => theme.background.transparent.primary}; background: ${({ theme }) => theme.background.transparent.primary};
border: 1px solid ${({ theme }) => theme.border.color.medium}; border: 1px solid ${({ theme }) => theme.border.color.medium};