feat: changing height and present widget better for mobile

[DNR500]

This branch looks to facilitate some of the changes for following tickets which are kind of inter-related

Jira: LF-3514
Jira: LF-8614
Jira: LF-8615

New controls have been added to facilitate testing and development when working with widget height changes. In the Design section of the Playground, you will now find a new option labeled 'Layout.' This option reveals additional controls within the Playground settings. A toggle switch is available in these settings, allowing you to easily enable or disable this feature.

This toggle currently covers the 'bookmarks store' control that sits in the 'Playground settings'- this is purely to mock out data to develop against and that mock data may not work as expected in some parts of the widget.

Layout controls

Presents controls for - default, restricted max height, restricted height, full height.

Default

Restricted max height

Restricted height

Full height

Playground settings

*When layout is NOT full height

*When layout is full height - controls to show a mock header and mock footer are available

How this functionality works with the widget config

We have 4 conceptual ways of dealing with the widgets: default, restricted max height, restricted height, full height.

Default
This requires no change to config but fundamentally works in the same way as the restricted max height. Its present the default max height of the widget as 682px.

Restricted max height
To use this layout you can add a max height property to the container section of the config. You should use a number not a string value to provide the max height in px. And its advisable to use a value above 682 which is the default value of the widget.

const widgetConfig: WidgetConfig = {
  ...
  theme; {
    container: {
      maxHeight: 820
    }
  }
 ...
}

When using restricted max height any pages inside the widget that are bigger than the max height provided will present scrolling to allow content to be reachable.

When pages are smaller than the max height the Widgets outer container, the 'widget-app-expanded-container', should shrink to take up only the minimum space required - generally pages inside the Widget will occupy the minimum space needed.

Restricted height
To use this layout you can add a height property to the container section of the config. You should use a number not a string value to provide the height in px. And its advisable to use a value above 682 which is the default value of the widget.

const widgetConfig: WidgetConfig = {
  ...
  theme; {
    container: {
      height: 820
    }
  }
  ...
}

When using restricted height all pages in the Widget should, as a minimum, occupy the full height stated and any pages inside the widget that are bigger than the height provided will present scrolling to allow content to be reachable.

Widgets outer container, the 'widget-app-expanded-container', will remain fixed at the height presented in the config.

Its recommend NOT to attempt to use the containers height and maxHeight together - in the Widget they present different modes of operation.

Full height
Full height has initially been included to better present the widget where less screen real estate is available such as on mobile devices. It assumes that the widget will make up the majority of the content and functionality on a page and where possible will allow scrolling via the page itself. With this layout the widget will attempt to occupy the full height of the HTML element containing it.

Full height layout can feature number of different properties in the config - we will break each of these down

const widgetConfig: WidgetConfig = {
  ...
  variant: 'compact'
  theme; {
    container: {
      display: 'flex',
      height: '100%'
    }
    header: {
      position: 'fixed',
      top: 0,
    },
  }
  ...
}

• variant - required - full height is designed to work with the 'compact' variant - 'compact 'itself is already built to work with smaller screen spaces in mind.
• container - required - this should feature display: 'flex', and height: '100%' to tell the Widget to occupy the full space of the containing HTML element and to also allow the use of flex in some parts of the Widget to try to better use available screen space.
• header - optional - in other layouts such as restricted max height and restricted height the widget headers are 'sticky' so will stay in position when the user scrolls. This can be more trick to do when using the Widget in full height layout so this option can help you achieve a similar effect when using the full height option. When used this will position the widgets page header in relation to the window and remove it from the static flow of the document.
  • position: 'fixed', - sets up the header positioning
  • 'top: 0,' - the top property should allow the header to be position allowing for things like headers or site navigation. that might sit above the widget. For example you might want to change it to 'top: 48,'
  • When header is not included in the config the Widgets page header will remain in the static flow of the document will be part of the scrolling content - so on pages that can scroll the header may scroll out view.

Using a full height Widget on a page
To present the widget well for something like a mobile experience the pages HTML & CSS outside of the Widget will also have to be considered as well as the widget settings. With the Widget surrendering its height to its external HTML container this needs to be handled well by the containing application.

• Viewport meta updates may be need for the page to correctly perform well as expected on mobile
  • eg <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
• You may also want to think about you page behaves on in terms of occupying the fully page height
  • for example In the Widget Playground we use '100dvh' with the min-height css which means that if widgets pages are bigger than this that the page can still scroll to allow access to that widget content. Also that when widgets pages are smaller than the viewport they can scale and position elements to better use the available space to occupy the full screen height.
  • You should add overscroll-behavior: none; to the root/body of your page to prevent undesired scrolling behaviour
  • Placement on the page in relation to headers and footers may also have to be considered.

[github-actions]

Hey! This is your new endopint: https://18035810.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://68c7bbba.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://af3ff380.widget-lf3514impr.pages.dev

[chybisov]

Let's add this id attribute here please to be consistent https://github.com/lifinance/widget/blob/main/packages/widget/src/utils/elements.ts#L1

[DNR500]

This one isn't inside the widget so that list wouldn't really apply - this one is just used to connect a label to an input using htmlFor nothing else should need it. I've shifted it to use reacts useId hook any so it will always be unique and that useId hook is meant to be written with performance in mind.

[github-actions]

Hey! This is your new endopint: https://742de62b.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://039a6034.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://e17a73f0.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://e2ea90f3.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://860d1092.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://bd4f4d36.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://41458a58.widget-lf3514impr.pages.dev

[github-actions]

Hey! This is your new endopint: https://7c34dcd9.widget-lf3514impr.pages.dev