Skip to content

refactor: handle 'fit-content' layout via restricted max height#683

Merged
chybisov merged 4 commits intomainfrom
refactor-fit-content
Apr 2, 2026
Merged

refactor: handle 'fit-content' layout via restricted max height#683
chybisov merged 4 commits intomainfrom
refactor-fit-content

Conversation

@effie-ms
Copy link
Copy Markdown
Contributor

@effie-ms effie-ms commented Mar 30, 2026

Which Linear task is linked to this PR?

https://linear.app/lifi-linear/issue/EMB-324/add-fit-content-height-option-to-restricted-max-height-layout-on

Why was it implemented this way?

This PR is continuation of "Fit content" and "Default" layout refactoring.

Previously "Fit content" mode was merged with "Default", however specification of max height in "Default" layout did not allow a flexible way of differentiating "Restricted max height" and "Default" layouts, creating a problem of heights assigned to undefined and not assigned at all being handled in different ways. To improve clarity:

  1. A checkbox "Apply only to long pages" is added to "Restricted max height" layout. If it is ticked, height is assigned to "fit-content", which replicates former "Fit content" layout. If not - it replicates "Restricted max height" layout.

  2. Default mode (height: undefined, maxHeight: undefined, or not specified at all) - resolves to "Fit content" with max height 686px on long pages.

Top and bottom paddings/margins/alignments are added on request for better centering.

Visual showcase (Screenshots or Videos)

If applicable, attach screenshots, GIFs, or videos to showcase the functionality, UI changes, or bug fixes.

Checklist before requesting a review

  • I have performed a self-review and testing of my code.
  • This pull request is focused and addresses a single problem.

@effie-ms effie-ms self-assigned this Mar 30, 2026
@effie-ms effie-ms changed the title refactor: remove 'fit-content' height handling from playground and simplify height logic refactor: handle 'fit-content' layout via restricted max height Apr 1, 2026
variants: [
{
props: {
variant: 'drawer',
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed since previously variant was not passed at all (probably a legacy leftover).

? { marginBottom: 6 }
: undefined
}
sx={{ marginBottom: !isFullHeightLayout || isFooterFixed ? 6 : 0 }}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Margin bottom is added for widget not to touch the bottom of the page or the footer (routes container still might though - because of the absolute positioning).

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 1, 2026

Hey! This is your new endpoint: https://5d11a65a.widget-refactorfi.pages.dev

(config?.theme?.container?.display === 'flex' && !showHeader)
}
alignTop={config?.theme?.container?.display === 'flex'}
removePaddingTop={isFullHeightLayout && !showHeader}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On playground, config?.theme?.container?.height === '100%' and config?.theme?.container?.display === 'flex' is "Full height" layout - there are no other layouts with display: "flex".

@effie-ms effie-ms marked this pull request as ready for review April 1, 2026 10:40
@effie-ms effie-ms requested a review from chybisov April 1, 2026 10:40
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 1, 2026

Hey! This is your new endpoint: https://c616ea73.widget-refactorfi.pages.dev

@chybisov chybisov merged commit 5afe550 into main Apr 2, 2026
2 checks passed
@chybisov chybisov deleted the refactor-fit-content branch April 2, 2026 09:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants