Correctly separate widgets in side-column mode.

[mabdullahabaid]

Closes 2006

Removed the top-border in FieldsWidget and added buttom-border to WidgetCard.

Beyond this, I tried making the spacing of these widgets even at the top and the bottom, but it turns out the widgets are also used in activity views, so configuring them for side-column messes up those activity views/tabs.

I feel that in order to make these widgets cleaner in side-column, we have to make the widgets context aware - I tried figuring out some other solution, but since some cards have spacing defined within, we do not really have a clean and quick solution imo.

If we do not align spacing, the following delta remains in bottom-spacing of the widgets and it looks ugly.

Let me know your thoughts.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[mabdullahabaid]

This is the widgets array I added to DefaultPersonRecordPageLayout to enable all the widgets and figure out the delta.

      widgets: [
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-fields',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Fields',
          type: WidgetType.FIELDS,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 0,
            column: 0,
            rowSpan: 12,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-side-tasks',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Tasks',
          type: WidgetType.TASKS,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 1,
            column: 0,
            rowSpan: 6,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-side-notes',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Notes',
          type: WidgetType.NOTES,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 2,
            column: 0,
            rowSpan: 6,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-side-timeline',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Timeline',
          type: WidgetType.TIMELINE,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 3,
            column: 0,
            rowSpan: 6,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-side-files',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Files',
          type: WidgetType.FILES,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 4,
            column: 0,
            rowSpan: 6,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-side-emails',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Emails',
          type: WidgetType.EMAILS,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 5,
            column: 0,
            rowSpan: 6,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
        {
          __typename: 'PageLayoutWidget',
          id: 'person-widget-side-calendar',
          pageLayoutTabId: 'person-tab-fields',
          title: 'Calendar',
          type: WidgetType.CALENDAR,
          objectMetadataId: null,
          gridPosition: {
            __typename: 'GridPosition',
            row: 6,
            column: 0,
            rowSpan: 6,
            columnSpan: 12,
          },
          configuration: null,
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          deletedAt: null,
        },
      ],

[cubic-dev-ai]

No issues found across 3 files

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:32788

This environment will automatically shut down when the PR is closed or after 5 hours.

[Devessier]

Thanks for your work! I suggest a few technical changes but overall it looks good.

[Devessier]

Good! As mentioned in DM, I think we have to do that in conjunction to a padding removal on the vertical list/editor components.

[Devessier]

I wonder if we don't want to keep gap here. Let's go with that, we can update the styles later if we want to adding spacing.

[Devessier]

We can't drop this property. The component is used in the normal code path, currently in production.

I suggest you to fork the whole RecordDetailSectionContainer component into FieldsWidgetSectionContainer.

Most code paths will likely diverge, and RecordDetailSectionContainer will likely be replaced by Fields widget!