PostDetailPage max width?

Web
1

I have a question related to my post earlier about the grey bars in the home page of a Social+ feed

At the home page, the content is centered between non-scrollable grey bars. However, the PostDetailPage has no such restriction - by default the post detail takes up the whole screen.

Is there a QUICK, easy way to have the PostDetailPage have parity with the home page? i.e., centered with a max-width? We could of course add our own custom css that copies the settings in src/v4/social/layouts/Main/Main.module.css . I’m just wondering if there is a flag that could accomplish this - which would also have the advantage of tracking any style changes that may be made in the UIKit.

Feature parity between the PostDetailPage and the main layout would improve the user experience. Thank you!

2

Hello @mqm , thank you for reaching out and for the detailed information. We’ve passed this to the team for review and will keep you posted with any updates.

3

Hello @mqm , Thanks for your patience on this — we’ve checked with the team internally, and we apologize for the longer turnaround time.

PostDetailPage is designed to follow the same UI behavior as the homepage. If PostDetailPage appears to take up the entire screen, it’s because the screen size is being detected as a mobile display. In that case, UIKit automatically renders the mobile UI, and the homepage will also render in the mobile layout.

When UIKit is opened in desktop mode, PostDetailPage will display centered with grey side margins, consistent with the homepage layout.

Please refer to the example images below for reference (PostDetailPage on desktop screen vs. Home page in mobile screen).

image
image1024×842 99.9 KB

image
image441×1223 139 KB

4

I realize I should provide more context of my question.

We specifically had some logic like this:

        {sharedPost && <AmityPostDetailPage id={sharedPost.postId} commentId={sharedPost.commentId} />}
        {useForum && !sharedPost && <AmityUiKitSocial />}

The issue was that using the AmityPostDetailPage component directly had none of the styling that the AmityUiKitSocial provided us.

By forcing the UI Kit to expose the pushPage, PageTypesvalues from useAmityNavigation, I was able to push a PageTypes.PostDetailPage page to the navigation and use the AmityUiKitSocial to display everything.

I suppose my request is related to another post of mine here, Navigation Controller for PostDetailPage - #4 by mqm - that the developer should have more control over manipulating the navigation.

5

Hello @mqm , Thanks for the added context. We really appreciate the suggestion, and we’ll share it with our Product team for future consideration.

For now, this behavior is by design—when used standalone, AmityPostDetailPage may not fully inherit the UIKit styling.

1 Like
6

Understood, thank you.

This fork of the UIKit does allow me to accomplish what we want, so we’ll move forward with that for now. Thank you!

2 Likes