Remove all styled(Component) patterns in favor of parent wrappers and props#18430
Merged
charlesBochet merged 7 commits intomainfrom Mar 5, 2026
Merged
Remove all styled(Component) patterns in favor of parent wrappers and props#18430charlesBochet merged 7 commits intomainfrom
charlesBochet merged 7 commits intomainfrom
Conversation
… props Replace ~350 styled(Component) usages across twenty-front and twenty-ui (211 files changed). Each was replaced following these rules: - Margin/layout CSS (margin, padding, flex, align-self, width) → wrapped in a styled.div/styled.span parent container - Third-party components (Link, TextareaAutosize, Handle, ReactPhoneNumberInput, etc.) → parent container with child CSS selectors (> a, > textarea, > input, etc.) - Intrinsic behavior via existing props (TableRow gridTemplateColumns, TableCell color/align) → replaced styled(TableRow)/styled(TableCell) with direct prop usage - Other visual overrides on twenty-ui components (Card, Section, TabList, Button, MenuItem, ScrollWrapper, etc.) → parent wrappers with > div / > * child selectors - Merged styles when extending styled.div/styled.span (no external component involved) Also adds overflow: hidden to parent containers wrapping ScrollWrapper so scroll activates correctly with the new wrapper structure. Made-with: Cursor
- EmailsCard: styled(H1Title) → wrapper with > h2 child selector - TimelineCard: styled(AnimatedPlaceholderEmptyContainer) → conditional wrapper div around AnimatedPlaceholderEmptyContainer - RecordTableEmptyStateDisplay: styled(AnimatedPlaceholderEmptyContainer) → standalone styled.div (outer wrapper only needed align-items) - RecordTableActionRow: styled(RecordTableDragAndDropPlaceholderCell) → direct usage (component already has left:0 / position:sticky) - GraphWidgetAggregateChart: styled(H1Title) → wrapper with > h2 selector - GraphWidgetGaugeChart: styled(H1Title) → wrapper div with absolute positioning - WorkflowVariablesDropdown: styled(StyledDropdownButtonContainer) → merged into standalone styled.div with all base + override styles Made-with: Cursor
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes styling patterns across twenty-front and twenty-ui by removing styled(Component) usages and replacing them with (a) parent wrapper elements using child selectors and (b) existing component props where available. This aligns styling with intrinsic props and reduces reliance on wrapping third-party / composite components in styled().
Changes:
- Replaced
styled(Component)patterns with wrapperstyled.div/styled.spancontainers and child selectors (e.g.> a,> input,> *). - Migrated some style overrides to component props (e.g.
TableRow.gridTemplateColumns,TableCell.align/color/padding). - Updated a few components to use
@linaria/corecssclasses (notablyAppTooltip) and added wrapperoverflow: hiddenin someScrollWrapper-adjacent layouts.
Reviewed changes
Copilot reviewed 219 out of 219 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx | Replace extended label with wrapper div |
| packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx | Inline base styles into styled.div |
| packages/twenty-ui/src/layout/modal/components/stories/Modal.stories.tsx | Wrap Section for margin styling |
| packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx | Replace styled(JsonListItem) with li |
| packages/twenty-ui/src/display/tooltip/AppTooltip.tsx | Replace styled(Tooltip) with css class |
| packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx | Wrap Section and Link for styles |
| packages/twenty-front/src/pages/settings/emailing-domains/SettingsEmailingDomains.tsx | Wrap Link for text-decoration |
| packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx | Wrap icon component to apply color |
| packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx | Convert styled TableRow to prop-based component |
| packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx | Wrap SettingsTextInput for layout |
| packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationTableRow.tsx | Move TableRow/TableCell styling into props |
| packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationNameDescriptionTable.tsx | Move TableCell styling into props |
| packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx | Replace styled cell extension with prop wrapper |
| packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTable.tsx | Wrap TableHeader to apply min-width |
| packages/twenty-front/src/pages/settings/applications/components/SettingsAppModalLayout.tsx | Replace styled Button/Section with wrappers |
| packages/twenty-front/src/pages/settings/ai/components/SettingsToolTableRow.tsx | Move grid + cell styling into props |
| packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx | Move grid + cell styling into props |
| packages/twenty-front/src/pages/settings/ai/SettingsAgentForm.tsx | Wrap TabList for spacing |
| packages/twenty-front/src/pages/settings/ai/SettingsAI.tsx | Wrap Link for text-decoration |
| packages/twenty-front/src/pages/settings/SettingsTwoFactorAuthenticationMethod.tsx | Wrap QRCode for sizing |
| packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx | Replace motion.div styling with div |
| packages/twenty-front/src/pages/onboarding/BookCallDecision.tsx | Wrap Link for text-decoration |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx | Wrap TabList + JSON input for layout |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/BodyInput.tsx | Wrap Select for margin styling |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx | Replace styled extension with inlined div |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx | Wrap TabList for styling |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx | Wrap TabList for styling |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx | Wrap TextInput and target nested input |
| packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx | Replace styled Label/Icon with wrappers |
| packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddRootStepFilterButton.tsx | Wrap Button for margin styling |
| packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx | Replace styled component with div layout |
| packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleTarget.tsx | Wrap Handle and retarget selectors |
| packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramHandleSource.tsx | Wrap Handle and retarget selectors |
| packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeButtonGroup.tsx | Wrap IconButtonGroup for selected styling |
| packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx | Wrap menu container to set font-weight |
| packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx | Wrap Pill and target child styles |
| packages/twenty-front/src/modules/ui/utilities/drag-select/components/stories/DragSelect.stories.tsx | Wrap ScrollWrapper and add overflow hidden |
| packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx | Wrap collapse button for sizing |
| packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx | Wrap chevron icon to preserve disabled styling |
| packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx | Wrap Link for text-overflow styles |
| packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx | Wrap Link for text-overflow styles |
| packages/twenty-front/src/modules/ui/layout/table/components/TableSubRow.tsx | Wrap TableRow for left padding |
| packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx | Wrap TableBody for border styling |
| packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx | Wrap TabButton to control height |
| packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx | Wrap ScrollWrapper and add overflow hidden |
| packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenModal.tsx | Wrap PageHeader for padding |
| packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx | Wrap PageHeader for padding |
| packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx | Wrap Label for background/padding |
| packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx | Wrap ProgressBar and action Link |
| packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx | Wrap Button to preserve centering |
| packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx | Wrap toolbar Button for fixed height |
| packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx | Remove RadioGroup; control radios manually |
| packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx | Wrap Heading for spacing |
| packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx | Wrap Banner to style inner div |
| packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx | Wrap icon for color/layout |
| packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx | Wrap ModalFooter and target inner styles |
| packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx | Wrap DataGrid with CSS-var container |
| packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx | Wrap MenuItem to apply border/background |
| packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsApprovedAccessDomainsListCard.tsx | Wrap Link for text-decoration |
| packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersListCard.tsx | Wrap link for disabled pointer-events |
| packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsToolSection.tsx | Wrap Card for margin styling |
| packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableHeader.tsx | Replace styled header with prop-based TableHeader |
| packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsSection.tsx | Wrap Card for margin styling |
| packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/SettingsRolePermissionsObjectsTableHeader.tsx | Replace styled headers with prop-based TableHeader |
| packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx | Replace styled row/cell with prop wrappers |
| packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx | Wrap search input for spacing |
| packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx | Replace styled cells with prop-based TableCell |
| packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelSection.tsx | Wrap Section and replace empty-state cell |
| packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx | Wrap input and target nested input styles |
| packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx | Replace styled TableCell with prop |
| packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTable.tsx | Wrap input; replace empty-state cell |
| packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx | Wrap action buttons for alignment |
| packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx | Replace Card with div container |
| packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTabEnvironmentVariableTableRow.tsx | Convert styled rows to prop wrappers |
| packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionCodeEditorTab.tsx | Wrap TabList to remove border |
| packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsTable.tsx | Wrap TableBody and convert row to prop wrapper |
| packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx | Replace styled cells and icon wrapper |
| packages/twenty-front/src/modules/settings/domains/components/SettingsCustomDomain.tsx | Wrap ButtonGroup and Button |
| packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomain.tsx | Wrap ButtonGroup and Button |
| packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx | Wrap chevron icon for disabled styling |
| packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx | Wrap TableBody; inline TableRow props |
| packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx | Convert row/cells to prop-based equivalents |
| packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx | Wrap TableBody for border styling |
| packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx | Wrap conflict button and target inner button styles |
| packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx | Replace Card with div container |
| packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx | Wrap Section to override padding |
| packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationsTable.tsx | Wrap search input for layout |
| packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.tsx | New prop-wrapper exports for table row/cells |
| packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents.ts | Remove old styled(TableRow/TableCell) file |
| packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx | Convert row/cells to prop-based equivalents |
| packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx | Wrap Link and target anchor styles |
| packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreviewSubWidget.tsx | Wrap Card/CardContent and target children |
| packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx | Wrap Card/CardContent and target children |
| packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx | Wrap text input for padding |
| packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx | Wrap search input for full width |
| packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx | Wrap CardContent and target child styles |
| packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx | Wrap chevron and button to target inner element |
| packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx | Wrap CardContent and target child styles |
| packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx | Wrap CardContent + radio container |
| packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx | Replace styled base with div + toggle wrapper |
| packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx | Replace styled Card with wrapper component |
| packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx | Wrap CardFooter and target child styles |
| packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx | Wrap text input and target nested input |
| packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx | Wrap TableRow to apply hover styles |
| packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx | Wrap icon to apply flex alignment |
| packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx | Wrap table card and target padding |
| packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx | Wrap table card and target padding |
| packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesTable.tsx | Wrap TableBody for border styling |
| packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx | Wrap TableRow for hover + truncate via props |
| packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx | Wrap search input for full width |
| packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx | Wrap search input for flex layout |
| packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx | Wrap input/label; replace styled checkbox cell |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsConnectedAccountsTableHeader.tsx | Replace styled headers with padding props |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsVisibilityIcon.tsx | Replace shared media component with styled div |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx | Wrap CardContent and toggle |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx | Replace shared media component with styled div |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageAutoCreationIcon.tsx | Replace shared media component with styled div |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx | Wrap bottom Section to apply border/padding |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard.tsx | Wrap cardMedia to apply height |
| packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTable.tsx | Wrap Table and TableBody |
| packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx | Inline extended styles into new div |
| packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx | Wrap chevron icon for layout |
| packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx | Wrap Link to preserve text-decoration |
| packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx | Wrap TabList and ScrollWrapper |
| packages/twenty-front/src/modules/onboarding/components/OnboardingSyncEmailsSettingsCard.tsx | Wrap cardMedia to apply width |
| packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx | Wrap Section to apply flex/gap |
| packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx | Wrap counter chip for positioning |
| packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx | Wrap chevron icon for layout |
| packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx | Merge scroll + value container styles |
| packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx | Inline base cell styles into new styled div |
| packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx | Wrap cell style wrapper for border-left |
| packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx | Wrap cell style wrapper for border-left |
| packages/twenty-front/src/modules/object-record/record-merge/components/MergeSettingsTab.tsx | Wrap Section for margin |
| packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx | Wrap TabList for styling |
| packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx | Wrap MenuItem for width calc |
| packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/PhonesFieldInput.tsx | Wrap third-party phone input and retarget styles |
| packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx | Inline extended display styles; wrap placeholder |
| packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx | Inline extended display styles; wrap input/placeholder |
| packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx | Wrap RecordCard for width |
| packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx | Wrap nav buttons for padding |
| packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx | Wrap add button for padding |
| packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx | Wrap header/tag to target child padding |
| packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx | Wrap Tag for overflow behavior |
| packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx | Wrap counter chip for positioning |
| packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithCommandMenu.tsx | Wrap PageBody for desktop/mobile padding |
| packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx | Wrap close IconButton for color/layout |
| packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStepContent.tsx | Wrap TabList for styling |
| packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarRightCornerIcon.tsx | Wrap IconButton for color styling |
| packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx | Wrap TextInput and target nested input |
| packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx | Wrap TextInput and target nested input |
| packages/twenty-front/src/modules/command-menu/components/CommandMenuBackButton.tsx | Use base icon; move color to container |
| packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx | Wrap Label for padding/alignment |
| packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx | Wrap chips for padding/margins |
| packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx | Wrap select/button for flex layout |
| packages/twenty-front/src/modules/ai/components/suggested-prompts/AIChatSuggestedPrompts.tsx | Wrap prompt buttons for alignment |
| packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx | Wrap loader icon + tool tab list |
| packages/twenty-front/src/modules/ai/components/AIChatTabMessageList.tsx | Wrap ScrollWrapper for flex layout |
| packages/twenty-front/src/modules/ai/components/AIChatTab.tsx | Wrap read-only LightButton styling |
| packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx | Wrap loading icon for transform/color |
| packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx | Wrap floating icon button and apply styles |
| packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventRowDynamicComponent.tsx | Inline extended styles into div |
| packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx | Wrap Card to apply background/border |
| packages/twenty-front/src/modules/activities/files/components/DropZone.tsx | Wrap upload icon for flex/color |
| packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx | Wrap Avatar to add margin |
| packages/twenty-front/src/modules/activities/components/ActivityRow.tsx | Wrap CardContent to target child selectors |
| packages/twenty-front/src/modules/activities/components/ActivityList.tsx | Wrap Card and target inner separators |
| packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx | Wrap PropertyBox for sizing |
| packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx | Wrap Card/CardContent and target border |
| packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx | Wrap PropertyBox for sizing |
| packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx | Wrap CardContent and event rows |
Comments suppressed due to low confidence (3)
packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx:19
StyledSettingsApiPlaygroundCoverImageused to be aCard(which appliesoverflow: hidden). After switching to a plaindiv, the rounded corners won’t clip child content unlessoverflow: hiddenis added (or the component keeps usingCard). This can cause child elements to bleed outside the border radius.
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx:24StyledCoverImageContainerno longer usesCard, so it lostoverflow: hiddenfromCard’s base styles. Withborder-radiusset, missingoverflow: hiddencan allow inner content (e.g. the floating button) to render outside the rounded corners; addoverflow: hidden(or re-wrap withCard) to preserve the previous clipping behavior.
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsStyles.tsx:82- This component uses JSX prop spreading (
<IconChevronRight {...props} />) without the localeslint-disable react/jsx-props-no-spreadingused elsewhere in this PR. If that lint rule is enabled (as implied by other hunks), this will fail lint; either add the disable comment or avoid spreading by passing explicit props.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- TimelineCard: use isInSidePanel (renamed from isInRightDrawer) with our wrapper approach instead of styled(AnimatedPlaceholderEmptyContainer) - MainContainerLayoutWithSidePanel: use SidePanelForDesktop (renamed from CommandMenuSidePanelForDesktop), drop PageBody wrapper for desktop path - PageLayoutRendererContent: fix isInRightDrawer → isInSidePanel in behaveAsLinks prop, keep our StyledPageLayoutTabListContainer wrapper - SidePanelBackButton: take renamed component/hook from main, drop the unused styled(IconChevronLeft) pattern main introduced - SidePanelWorkflowRunViewStepContent: use sidePanelPageComponentInstance with our StyledTabListContainer wrapper approach Made-with: Cursor
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 8 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx">
<violation number="1" location="packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx:19">
P2: This refactor drops the `align-items` override on `AnimatedPlaceholderEmptyContainer`; the new wrapper styles the wrong element, so the empty-state content stays centered instead of left-aligned.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
...c/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay.tsx
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
11 issues found across 212 files
Note: This PR contains a large number of files. cubic only reviews up to 75 files per PR, so some files may not have been reviewed.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx">
<violation number="1" location="packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx:43">
P2: Wrapping `Card` in a bordered `StyledCardInnerContainer` introduces a double border and mismatched corner radius because `Card` already renders its own border/radius by default. Consider keeping the border/background on `Card` (using `backgroundColor`/`rounded`) and make the wrapper layout-only, or remove the wrapper border entirely.</violation>
</file>
<file name="packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx">
<violation number="1" location="packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx:14">
P2: `StyledRecordChipContainer` is a `<span>` but it can wrap a `RecordChip` that renders a `<div>` (via `Chip`), which causes invalid DOM nesting warnings in React. Use a block element wrapper with inline display to avoid `<div>` inside `<span>`.</violation>
<violation number="2" location="packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx:20">
P2: `StyledInlineMentionRecordChipContainer` is a `<span>` but `MentionRecordChip` can render a `<div>` (via `Chip` when the record is missing), which causes invalid DOM nesting warnings. Prefer a block element wrapper with inline display.</violation>
</file>
<file name="packages/twenty-front/src/modules/settings/components/SettingsCard.tsx">
<violation number="1" location="packages/twenty-front/src/modules/settings/components/SettingsCard.tsx:103">
P2: Disabled styling no longer changes the card text color because Card sets its own color, overriding the wrapper’s color. This makes disabled cards look enabled. Consider forcing the Card to inherit the wrapper color.</violation>
</file>
<file name="packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx">
<violation number="1" location="packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx:16">
P2: The flex/gap/padding styles were moved to a wrapper div, so they no longer apply to the CardContent’s children. This will break the row layout of the day + events. Apply these styles to the CardContent child via a selector in the wrapper.</violation>
</file>
<file name="packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithCommandMenu.tsx">
<violation number="1" location="packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithCommandMenu.tsx:22">
P2: Desktop layout no longer clears PageBody’s default padding, so the extra bottom/right spacing comes back. The padding reset needs to target the PageBody root (child) instead of the wrapper.</violation>
<violation number="2" location="packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithCommandMenu.tsx:37">
P2: Mobile layout no longer overrides PageBody’s default padding. Move the padding overrides to the PageBody child so the intended mobile spacing still applies.</violation>
</file>
<file name="packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx">
<violation number="1" location="packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx:13">
P2: The new wrapper inserts `<Section>` between the flex container and the fields, so the `display:flex`/`gap`/`padding` styles no longer apply to the `FormFieldInput` elements. This changes the layout/spacing compared to the previous `styled(Section)` behavior.</violation>
</file>
<file name="packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx">
<violation number="1" location="packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx:45">
P3: The nested hover selector is missing `&`, so it targets a hovered descendant of the link instead of the link itself. This prevents the intended hover color from applying.</violation>
</file>
<file name="packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx">
<violation number="1" location="packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx:46">
P2: The extra wrapper makes the checkbox `.table-cell` no longer a sibling of other cells, so `:nth-of-type`/`:first-of-type` row styling in RecordTableRowDiv won’t apply to this cell. This can break focused/active row borders or backgrounds for the checkbox column.</violation>
</file>
<file name="packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx">
<violation number="1" location="packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx:31">
P2: The new wrapper div makes the `.table-cell` no longer a direct sibling in the row, so the nth-of-type column styling treats the checkbox cell as column 1 instead of column 2 (sticky left 0 / focus borders). This breaks the table’s column positioning rules.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx
Outdated
Show resolved
Hide resolved
packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
+22
to
25
| const StyledPageBodyForDesktopContainer = styled.div` | ||
| flex: 1 1 0; | ||
| min-width: 0; | ||
| width: 0; |
Contributor
There was a problem hiding this comment.
P2: Desktop layout no longer clears PageBody’s default padding, so the extra bottom/right spacing comes back. The padding reset needs to target the PageBody root (child) instead of the wrapper.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithCommandMenu.tsx, line 22:
<comment>Desktop layout no longer clears PageBody’s default padding, so the extra bottom/right spacing comes back. The padding reset needs to target the PageBody root (child) instead of the wrapper.</comment>
<file context>
@@ -19,7 +19,7 @@ const StyledMainContainerLayoutForDesktop = styled.div`
`;
-const StyledPageBodyForDesktop = styled(PageBody)`
+const StyledPageBodyForDesktopContainer = styled.div`
flex: 1 1 0;
min-width: 0;
</file context>
...nt/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsForm.tsx
Show resolved
Hide resolved
| <Checkbox hoverable checked={isSelected} /> | ||
| </StyledContainer> | ||
| </StyledRecordTableTd> | ||
| <StyledRecordTableTdContainer> |
Contributor
There was a problem hiding this comment.
P2: The extra wrapper makes the checkbox .table-cell no longer a sibling of other cells, so :nth-of-type/:first-of-type row styling in RecordTableRowDiv won’t apply to this cell. This can break focused/active row borders or backgrounds for the checkbox column.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx, line 46:
<comment>The extra wrapper makes the checkbox `.table-cell` no longer a sibling of other cells, so `:nth-of-type`/`:first-of-type` row styling in RecordTableRowDiv won’t apply to this cell. This can break focused/active row borders or backgrounds for the checkbox column.</comment>
<file context>
@@ -43,14 +43,16 @@ export const RecordTableCellCheckbox = () => {
- <Checkbox hoverable checked={isSelected} />
- </StyledContainer>
- </StyledRecordTableTd>
+ <StyledRecordTableTdContainer>
+ <RecordTableCellStyleWrapper
+ isSelected={isSelected}
</file context>
| <Checkbox hoverable checked={hasUserSelectedAllRows === true} /> | ||
| </StyledContainer> | ||
| </StyledRecordTableTd> | ||
| <StyledRecordTableTdContainer> |
Contributor
There was a problem hiding this comment.
P2: The new wrapper div makes the .table-cell no longer a direct sibling in the row, so the nth-of-type column styling treats the checkbox cell as column 1 instead of column 2 (sticky left 0 / focus borders). This breaks the table’s column positioning rules.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx, line 31:
<comment>The new wrapper div makes the `.table-cell` no longer a direct sibling in the row, so the nth-of-type column styling treats the checkbox cell as column 1 instead of column 2 (sticky left 0 / focus borders). This breaks the table’s column positioning rules.</comment>
<file context>
@@ -20,22 +20,24 @@ const StyledContainer = styled.div`
- <Checkbox hoverable checked={hasUserSelectedAllRows === true} />
- </StyledContainer>
- </StyledRecordTableTd>
+ <StyledRecordTableTdContainer>
+ <RecordTableCellStyleWrapper
+ isSelected={hasUserSelectedAllRows}
</file context>
...t-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx
Outdated
Show resolved
Hide resolved
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| {title} | ||
| {soon && <Pill label={t`Soon`} />} | ||
| </StyledTitle> | ||
| {Status && Status} |
- Ignore individual-entry.ts in eslint config (intentionally excluded from tsconfig, was causing typed linting parse error) - Inline CORE_OBJECT_NAMES into RESERVED_METADATA_NAME_KEYWORDS to satisfy max-consts-per-file rule (max 1 per constants file) Made-with: Cursor
thomtrp
reviewed
Mar 5, 2026
| transition: color ${themeCssVariables.animation.duration.normal} ease; | ||
| width: 100%; | ||
|
|
||
| > * { |
| & > :not(:last-child) { | ||
| border-bottom: 1px solid ${themeCssVariables.border.color.light}; | ||
| const StyledListContainer = styled.div` | ||
| > * { |
thomtrp
reviewed
Mar 5, 2026
| <TableRow | ||
| gridTemplateColumns="28px 148px 256px 80px" | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} |
Contributor
There was a problem hiding this comment.
I think we can do better than this
thomtrp
reviewed
Mar 5, 2026
| ) => ( | ||
| <TableRow | ||
| gridTemplateColumns="minmax(0, 1fr) 148px 148px 36px" | ||
| // eslint-disable-next-line react/jsx-props-no-spreading |
thomtrp
reviewed
Mar 5, 2026
| align="center" | ||
| padding={`0 ${themeCssVariables.spacing[1]} 0 ${themeCssVariables.spacing[2]}`} | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} |
thomtrp
approved these changes
Mar 5, 2026
…onst
Replace all pattern of `Styled*TableRow = (props) => <TableRow gridTemplateColumns={...} {...props} />`
with direct <TableRow gridTemplateColumns={CONST}> usage:
- Single-use: inline gridTemplateColumns prop directly
- Shared across files: export a GRID_TEMPLATE_COLUMNS const and import it
in both the row component and the header row in the table component
Also remove StyledFieldNameTableCell wrapper (single-use, inline props)
and fix navigate→link in SettingsObjectRelationItemTableRow (use to={linkToNavigate})
Made-with: Cursor
Contributor
There was a problem hiding this comment.
1 issue found across 21 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx">
<violation number="1" location="packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx:159">
P1: Setting `to` on this `TableRow` turns the whole row into a link, creating nested links with the existing inner `<Link>`/`<UndecoratedLink>` content. Use row click navigation instead of a link wrapper here.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| <StyledNameTableCell> | ||
| <TableRow | ||
| gridTemplateColumns={OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS} | ||
| to={linkToNavigate} |
Contributor
There was a problem hiding this comment.
P1: Setting to on this TableRow turns the whole row into a link, creating nested links with the existing inner <Link>/<UndecoratedLink> content. Use row click navigation instead of a link wrapper here.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx, line 159:
<comment>Setting `to` on this `TableRow` turns the whole row into a link, creating nested links with the existing inner `<Link>`/`<UndecoratedLink>` content. Use row click navigation instead of a link wrapper here.</comment>
<file context>
@@ -161,8 +154,10 @@ export const SettingsObjectRelationItemTableRow = ({
- <StyledObjectRelationTableRow onClick={navigateToFieldEdit}>
+ <TableRow
+ gridTemplateColumns={OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS}
+ to={linkToNavigate}
+ >
<TableCell
</file context>
Suggested change
| to={linkToNavigate} | |
| onClick={navigateToFieldEdit} |
Contributor
There was a problem hiding this comment.
1 issue found across 11 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx">
<violation number="1" location="packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx:14">
P2: Inline mention wrapper was changed from `span` to `div`, which can break inline HTML semantics in BlockNote content despite `display: inline`.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; | ||
|
|
||
| const StyledRecordChip = styled(RecordChip)` | ||
| const StyledRecordChipContainer = styled.div` |
Contributor
There was a problem hiding this comment.
P2: Inline mention wrapper was changed from span to div, which can break inline HTML semantics in BlockNote content despite display: inline.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx, line 14:
<comment>Inline mention wrapper was changed from `span` to `div`, which can break inline HTML semantics in BlockNote content despite `display: inline`.</comment>
<file context>
@@ -11,13 +11,15 @@ import { Chip, ChipVariant } from 'twenty-ui/components';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-const StyledRecordChipContainer = styled.span`
+const StyledRecordChipContainer = styled.div`
+ display: inline;
height: auto;
</file context>
Suggested change
| const StyledRecordChipContainer = styled.div` | |
| const StyledRecordChipContainer = styled.span` |
|
Hey @charlesBochet! After you've done the QA of your Pull Request, you can mark it as done here. Thank you! |
Contributor
TODOs/FIXMEs:
|
charlesBochet
added a commit
that referenced
this pull request
Mar 5, 2026
The styled(Component) removal in PR #18430 wrapped PageBody in a new StyledPageBodyForDesktopContainer div. This broke the height constraint chain: the wrapper was display:block, so PageBody's content grew beyond the flex-allocated height unconstrained. Fix: make the wrapper a flex column container with overflow:hidden so the height propagates down and inner overflow:auto containers scroll.
3 tasks
charlesBochet
added a commit
that referenced
this pull request
Mar 5, 2026
## Summary Fixes the workflow show page being blank after the `styled(Component)` removal in #18430. - PR #18430 replaced `styled(PageBody)` with a plain `div` wrapper (`StyledPageBodyForDesktopContainer`) around `PageBody`, but the wrapper defaulted to `display: block` - `PageBody`'s internal container uses `flex: 1 1 auto` to size itself, which requires a flex parent — the block wrapper broke height propagation, causing React Flow's container to have 0 height - Added `display: flex; flex-direction: column` to both `StyledPageBodyForDesktopContainer` and `StyledPageBodyForMobileContainer` to restore the flex chain ## Test plan - [x] Open a workflow record show page → diagram nodes are visible - [x] Open a company/person record show page → fields, tabs, and content render correctly - [x] Lint and typecheck pass
5 tasks
charlesBochet
added a commit
that referenced
this pull request
Mar 5, 2026
## Summary - Disable manual record creation (add button, + header button, add new row) for **WorkflowRun** and **WorkflowVersion** objects since these are system-managed and should not be created manually - Fix vertical centering of the record table empty state placeholder (regression from `styled(Component)` refactor in #18430 — the wrapper lost `height: 100%` / `width: 100%`) ## Test plan - [ ] Navigate to Workflow Runs index page → empty state should show centered placeholder **without** "Add a Workflow Run" button - [ ] Navigate to Workflow Versions index page → empty state should show centered placeholder **without** "Add a Workflow Version" button - [ ] Navigate to any other object index page (e.g. People, Companies) → empty state should still show the "Add a ..." button and be centered - [ ] Verify the + button in the record table header is hidden for workflow runs/versions - [ ] Verify the "Add New" row at the bottom of the table is hidden for workflow runs/versions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Eliminates all ~350
styled(Component)usages acrosstwenty-frontandtwenty-ui(212 files changed). Each was replaced following these rules:styled.div/styled.spanparent container> a,> textarea,> input, etc.)gridTemplateColumns, TableCellcolor/align) → replacedstyled(TableRow)/styled(TableCell)with direct prop usage> div/> *child selectorsstyled.div/styled.spanAlso adds
overflow: hiddento parent containers wrappingScrollWrapperso scroll activates correctly with the new wrapper structure.Migration patterns
styled(Avatar)withmargin-right<StyledAvatarContainer><Avatar /></StyledAvatarContainer>styled(Link)withtext-decoration: none<StyledLinkContainer><Link /></StyledLinkContainer>with> a { ... }styled(TableRow)withgrid-template-columns<TableRow gridTemplateColumns="..." />styled(TableCell)withcolor/align<TableCell color={...} align="right" />styled(Card)withmargin-top<StyledCardContainer><Card /></StyledCardContainer>styled(TabList)withbackground<StyledTabListContainer><TabList /></StyledTabListContainer>with> div { ... }styled(StyledBase)extending astyled.divstyled.divwith all styles inlined