---
sourceDocument: Zurich Customer Service Management
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/customer-service-management

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Enable a reflow for your UI Builder pages

# Enable a reflow for your UI Builder pages {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Enable a reflow for your UI Builder pages. This way, when you're resizing a window, you don't have to scroll horizontally.

## Before you begin

Role required: admin

## About this task

The reflow feature adjusts the properties of the components when you're resizing a window. It accommodates smaller screen sizes and changes the component's properties for the different screen sizes.

## Procedure

1. Navigate to AllUI Builder.
2. Under Experiences, select Playbook Experience Portal.
3. Open a specific page or variant: Either CSM Create Case Process or CSM Case Process, for which you want to adjust the reflow.
4. Edit the Playbook Activity Viewer component settings.
5. On the Styles tab in the UI Builder, set the height of the activity viewer to 100vh.
6. Navigate to the component Resizeable PanesPanes configuration and copy the code in the default displayed pane by editing the scripted property value.  

       // Resizable Panes default displayed pane scripted value
       ​
       // when in left/right pane position
       function evaluateProperty({api, helpers}) {
           if(!api.data.playbook_custom_layout.compactMode) return "both";
       ​
         return (api.data.playbook_custom_layout.selectedItem || {}).stageContextId ? "right" : "left";
       }
       ​
       // when in top/bottom pane position
       function evaluateProperty({api, helpers}) {
           if (!api.data.playbook_custom_layout.compactMode) return "both";

         return (api.data.playbook_custom_layout.selectedItem || {}).stageContextId ? "bottom" : "top";
       }

7. Select Done.  
   For more details, see [Reflow for playbook components](https://www.servicenow.com/docs/access?context=reflow-for-playbook-components&version=zurich&pubname=zurich-build-workflows&ft:locale=en-US).

*[\>]: and then