@openremote/manager 1.8.0-snapshot.20250725120000 → 1.8.0-snapshot.20250725123024

package/lib/pages/page-gateway.js

@@ -49,132 +49,132 @@ let PageGateway = class PageGateway extends Page {
     }
     static get styles() {
         // language=CSS
-        return css `
-            :host {
-                flex: 1;
-                width: 100%;
-                
-                display: flex;
-                justify-content: center;
-                
-                --or-panel-heading-min-height: 0px;
-                --or-panel-heading-margin: 4px 0 0 10px;
-                --or-panel-background-color: var(--or-app-color1, ${unsafeCSS(DefaultColor1)});
-                --or-panel-heading-font-size: 14px; 
-                --or-panel-padding: 14px;
-            }            
-            
-            #wrapper {  
-                height: 100%;
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-                overflow: auto;
-            }
-
-            #title {
-                display: flex;
-                width: calc(100% - 40px);
-                max-width: 1360px;
-                padding: 0px 20px;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-between;
-                margin: 8px auto;
-            }
-            
-            #title div {
-                display: flex;
-                align-items: center;
-            }
-            
-            #title > div > span {
-                font-size: 18px;
-                font-weight: bold;
-            }
-
-            #title > div > or-icon {
-                --or-icon-width: 20px;
-                --or-icon-height: 20px;
-                margin-right: 10px;
-                margin-left: 14px;
-            }
-
-            or-panel {
-                position: relative;
-                width: calc(100% - 40px);
-                max-width: 1360px;
-                margin: 0 auto 16px;
-                --or-panel-heading-text-transform: uppercase;
-            }
-
-            .gateway-status-header {
-                position: absolute;
-                top: 18px;
-                right: 25px;
-                font-weight: bold;
-                display: flex;
-            }
-
-            #gateway-content {
-                display: flex;
-                flex-wrap: wrap;
-                padding: 10px;
-                gap: 40px;
-            }
-
-            .gateway-column {
-                flex: 1;
-                flex-basis: 45%;
-                min-width: 350px;
-                display: flex;
-                flex-direction: column;
-                gap: 20px;
-            }
-
-            .gateway-sharing-control {
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .gateway-sharing-control-child {
-                margin-left: 20px;
-                display: flex;
-                gap: 10px;
-                align-items: center;
-            }
-
-            #gateway-footer {
-                margin-top: 40px;
-                display: flex;
-                justify-content: space-between;
-            }
-
-            #gateway-footer > div {
-                display: flex;
-                gap: 10px;
-            }
-            
-            @media only screen and (max-width: 780px){
-                :host {
-                    --or-panel-border-radius: 0;
-                }
-                or-panel {
-                    width: 100%;
-                    min-width: auto;
-                }
-                #title {
-                    width: 100%;
-                    min-width: auto;
-                }
-            }
-
-            @media only screen and (max-width: 1200px) {
-                #gateway-content {
-                    gap: 20px;
-                }
-            }
+        return css `
+            :host {
+                flex: 1;
+                width: 100%;
+                
+                display: flex;
+                justify-content: center;
+                
+                --or-panel-heading-min-height: 0px;
+                --or-panel-heading-margin: 4px 0 0 10px;
+                --or-panel-background-color: var(--or-app-color1, ${unsafeCSS(DefaultColor1)});
+                --or-panel-heading-font-size: 14px; 
+                --or-panel-padding: 14px;
+            }            
+            
+            #wrapper {  
+                height: 100%;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
+            }
+
+            #title {
+                display: flex;
+                width: calc(100% - 40px);
+                max-width: 1360px;
+                padding: 0px 20px;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                margin: 8px auto;
+            }
+            
+            #title div {
+                display: flex;
+                align-items: center;
+            }
+            
+            #title > div > span {
+                font-size: 18px;
+                font-weight: bold;
+            }
+
+            #title > div > or-icon {
+                --or-icon-width: 20px;
+                --or-icon-height: 20px;
+                margin-right: 10px;
+                margin-left: 14px;
+            }
+
+            or-panel {
+                position: relative;
+                width: calc(100% - 40px);
+                max-width: 1360px;
+                margin: 0 auto 16px;
+                --or-panel-heading-text-transform: uppercase;
+            }
+
+            .gateway-status-header {
+                position: absolute;
+                top: 18px;
+                right: 25px;
+                font-weight: bold;
+                display: flex;
+            }
+
+            #gateway-content {
+                display: flex;
+                flex-wrap: wrap;
+                padding: 10px;
+                gap: 40px;
+            }
+
+            .gateway-column {
+                flex: 1;
+                flex-basis: 45%;
+                min-width: 350px;
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+            }
+
+            .gateway-sharing-control {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .gateway-sharing-control-child {
+                margin-left: 20px;
+                display: flex;
+                gap: 10px;
+                align-items: center;
+            }
+
+            #gateway-footer {
+                margin-top: 40px;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            #gateway-footer > div {
+                display: flex;
+                gap: 10px;
+            }
+            
+            @media only screen and (max-width: 780px){
+                :host {
+                    --or-panel-border-radius: 0;
+                }
+                or-panel {
+                    width: 100%;
+                    min-width: auto;
+                }
+                #title {
+                    width: 100%;
+                    min-width: auto;
+                }
+            }
+
+            @media only screen and (max-width: 1200px) {
+                #gateway-content {
+                    gap: 20px;
+                }
+            }
         `;
     }
     get name() {
@@ -222,63 +222,63 @@ let PageGateway = class PageGateway extends Page {
     render() {
         const connection = this._connection;
         const disabled = this._loading || this._readonly;
-        return html `
-            <div id="wrapper">
-                
-                ${until(this._getTitleTemplate(connection, this._connectionStatus, disabled))}
-                
-                <or-panel ?disabled="${disabled}" .heading="${i18next.t("gateway.connectionDetails")}">
-                    ${when(this._connectionStatus, () => html `
-                        <div class="gateway-status-header">
-                            <or-translate value="status" style="font-weight: normal;"></or-translate>:
-                            <span style="margin-left: 10px;">${this._connectionStatus}</span>
-                        </div>
-                    `)}
-                    ${until(this._getContentTemplate(() => this._getSettingsColumns(connection, disabled)))}
-                </or-panel>
-                
-                <or-panel ?disabled="${disabled}" heading="${i18next.t("gateway.dataSharing")}">
-                    <div class="gateway-status-header">
-                        <or-mwc-input .type="${InputType.BUTTON}" label="JSON" outlined icon="pencil"
-                                      @or-mwc-input-changed="${() => this._openConnectionJSONEditor(connection)}"
-                        ></or-mwc-input>
-                    </div>
-                    ${until(this._getContentTemplate(() => this._getDataSharingColumns(connection, this._isDataSharingCustom(connection), disabled)))}
-                </or-panel>                
-     
-                <or-panel ?disabled="${disabled}" heading="${i18next.t("gateway.assetSyncRules")}">
-                    ${until(this._getContentTemplate(() => this._getAssetSyncRulesColumns(connection, disabled)))}
-                </or-panel>
-            </div>
+        return html `
+            <div id="wrapper">
+                
+                ${until(this._getTitleTemplate(connection, this._connectionStatus, disabled))}
+                
+                <or-panel ?disabled="${disabled}" .heading="${i18next.t("gateway.connectionDetails")}">
+                    ${when(this._connectionStatus, () => html `
+                        <div class="gateway-status-header">
+                            <or-translate value="status" style="font-weight: normal;"></or-translate>:
+                            <span style="margin-left: 10px;">${this._connectionStatus}</span>
+                        </div>
+                    `)}
+                    ${until(this._getContentTemplate(() => this._getSettingsColumns(connection, disabled)))}
+                </or-panel>
+                
+                <or-panel ?disabled="${disabled}" heading="${i18next.t("gateway.dataSharing")}">
+                    <div class="gateway-status-header">
+                        <or-mwc-input .type="${InputType.BUTTON}" label="JSON" outlined icon="pencil"
+                                      @or-mwc-input-changed="${() => this._openConnectionJSONEditor(connection)}"
+                        ></or-mwc-input>
+                    </div>
+                    ${until(this._getContentTemplate(() => this._getDataSharingColumns(connection, this._isDataSharingCustom(connection), disabled)))}
+                </or-panel>                
+     
+                <or-panel ?disabled="${disabled}" heading="${i18next.t("gateway.assetSyncRules")}">
+                    ${until(this._getContentTemplate(() => this._getAssetSyncRulesColumns(connection, disabled)))}
+                </or-panel>
+            </div>
         `;
     }
     _getTitleTemplate(connection_1, _status_1) {
         return __awaiter(this, arguments, void 0, function* (connection, _status, disabled = true) {
-            return html `
-            <div id="title">
-                <div>
-                    <or-icon icon="cloud"></or-icon>
-                    <span>${i18next.t("gatewayConnection")}</span>
-                </div>
-                <div style="gap: 20px;">
-                    <div>
-                        <or-translate value="enabled"></or-translate>
-                        <or-mwc-input .type="${InputType.SWITCH}" .value="${!connection.disabled}" ?disabled="${disabled}"
-                                      @or-mwc-input-changed="${(e) => this._setConnectionProperty("disabled", !e.detail.value)}"
-                        ></or-mwc-input>
-                    </div>
-                    <or-mwc-input label="save" ?disabled="${!this._dirty || !this._invalid || disabled}" .type="${InputType.BUTTON}" raised @click="${() => this._save()}"></or-mwc-input>
-                </div>
-            </div>
+            return html `
+            <div id="title">
+                <div>
+                    <or-icon icon="cloud"></or-icon>
+                    <span>${i18next.t("gatewayConnection")}</span>
+                </div>
+                <div style="gap: 20px;">
+                    <div>
+                        <or-translate value="enabled"></or-translate>
+                        <or-mwc-input .type="${InputType.SWITCH}" .value="${!connection.disabled}" ?disabled="${disabled}"
+                                      @or-mwc-input-changed="${(e) => this._setConnectionProperty("disabled", !e.detail.value)}"
+                        ></or-mwc-input>
+                    </div>
+                    <or-mwc-input label="save" ?disabled="${!this._dirty || !this._invalid || disabled}" .type="${InputType.BUTTON}" raised @click="${() => this._save()}"></or-mwc-input>
+                </div>
+            </div>
         `;
         });
     }
     _getContentTemplate(content) {
         return __awaiter(this, void 0, void 0, function* () {
-            return html `
-            <div id="gateway-content">
-                ${until(content(), html `<or-loading></or-loading>`)}
-            </div>
+            return html `
+            <div id="gateway-content">
+                ${until(content(), html `<or-loading></or-loading>`)}
+            </div>
         `;
         });
     }
@@ -288,33 +288,33 @@ let PageGateway = class PageGateway extends Page {
      */
     _getSettingsColumns(connection_1) {
         return __awaiter(this, arguments, void 0, function* (connection, disabled = true) {
-            return html `
-            <div id="gateway-column-1" class="gateway-column">
-                <div></div>
-                <or-mwc-input id="gateway-host" .label="${i18next.t("host")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.host}"
-                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("host", e.detail.value)}"
-                ></or-mwc-input>
-                <or-mwc-input id="gateway-port" .label="${i18next.t("port")}" .type="${InputType.NUMBER}"
-                              ?disabled="${disabled}" min="1" max="65536" step="1" .value="${connection === null || connection === void 0 ? void 0 : connection.port}"
-                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("port", e.detail.value)}"
-                ></or-mwc-input>
-                <or-mwc-input id="gateway-realm" .label="${i18next.t("realm")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.realm}"
-                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("realm", e.detail.value)}"
-                ></or-mwc-input>
-                <div></div>
-            </div>
-            <div id="gateway-column-2" class="gateway-column">
-                <div></div>
-                <or-mwc-input id="gateway-clientid" .label="${i18next.t("clientId")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.clientId}"
-                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("clientId", e.detail.value)}"
-                ></or-mwc-input>
-                <or-mwc-input id="gateway-clientsecret" .label="${i18next.t("clientSecret")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.clientSecret}"
-                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("clientSecret", e.detail.value)}"
-                ></or-mwc-input>
-                <or-mwc-input id="gateway-secured" .label="${i18next.t("secured")}" .type="${InputType.CHECKBOX}" style="height: 56px;" ?disabled="${disabled}" .value="${(connection === null || connection === void 0 ? void 0 : connection.secured) || false}"
-                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("secured", e.detail.value)}"
-                ></or-mwc-input>
-            </div>
+            return html `
+            <div id="gateway-column-1" class="gateway-column">
+                <div></div>
+                <or-mwc-input id="gateway-host" .label="${i18next.t("host")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.host}"
+                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("host", e.detail.value)}"
+                ></or-mwc-input>
+                <or-mwc-input id="gateway-port" .label="${i18next.t("port")}" .type="${InputType.NUMBER}"
+                              ?disabled="${disabled}" min="1" max="65536" step="1" .value="${connection === null || connection === void 0 ? void 0 : connection.port}"
+                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("port", e.detail.value)}"
+                ></or-mwc-input>
+                <or-mwc-input id="gateway-realm" .label="${i18next.t("realm")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.realm}"
+                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("realm", e.detail.value)}"
+                ></or-mwc-input>
+                <div></div>
+            </div>
+            <div id="gateway-column-2" class="gateway-column">
+                <div></div>
+                <or-mwc-input id="gateway-clientid" .label="${i18next.t("clientId")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.clientId}"
+                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("clientId", e.detail.value)}"
+                ></or-mwc-input>
+                <or-mwc-input id="gateway-clientsecret" .label="${i18next.t("clientSecret")}" required .type="${InputType.TEXT}" ?disabled="${disabled}" .value="${connection === null || connection === void 0 ? void 0 : connection.clientSecret}"
+                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("clientSecret", e.detail.value)}"
+                ></or-mwc-input>
+                <or-mwc-input id="gateway-secured" .label="${i18next.t("secured")}" .type="${InputType.CHECKBOX}" style="height: 56px;" ?disabled="${disabled}" .value="${(connection === null || connection === void 0 ? void 0 : connection.secured) || false}"
+                              @or-mwc-input-changed="${(e) => this._setConnectionProperty("secured", e.detail.value)}"
+                ></or-mwc-input>
+            </div>
         `;
         });
     }
@@ -333,61 +333,61 @@ let PageGateway = class PageGateway extends Page {
             const attrAmountArr = (_d = connection.attributeFilters) === null || _d === void 0 ? void 0 : _d.map(filter => { var _a, _b, _c; return ((_c = (_b = (_a = filter.matcher) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length) || 0; });
             const attrAmount = attrAmountArr === null || attrAmountArr === void 0 ? void 0 : attrAmountArr.reduce((a, b) => a + b, 0);
             const controlStyling = controlsDisabled ? "--mdc-theme-text-primary-on-background: lightgray; color: lightgray" : undefined;
-            return html `
-            <div id="gateway-column-3" class="gateway-column">
-                ${when(isCustom, () => html `
-                    <or-translate value="gateway.limit_sharing_is_custom_error"></or-translate>
-                `, () => html `
-                    <div></div>
-                `)}
-                <div class="gateway-sharing-control" style="${controlStyling}">
-                    <or-mwc-input .label="${i18next.t("gateway.limit_sharing_attribute")}" .type="${InputType.CHECKBOX}"
-                                  ?disabled="${controlsDisabled}" .value="${controlsDisabled ? undefined : filterChecked}"
-                                  @or-mwc-input-changed="${(e) => this._onLimitAttributesCheck(e)}"
-                    ></or-mwc-input>
-                    <div class="gateway-sharing-control-child">
-                        <or-mwc-input .type="${InputType.BUTTON}" raised ?disabled="${filterDisabled}"
-                                      label="${attrAmount || 0} ${i18next.t("gateway.limit_sharing_attribute_selected")}"
-                                      @or-mwc-input-changed="${(e) => this._onLimitAttributesButtonClick(e)}"
-                        ></or-mwc-input>
-                    </div>
-                </div>
-                <div class="gateway-sharing-control"  style="${controlStyling}">
-                    <or-mwc-input .label="${i18next.t("gateway.limit_sharing_rate")}" .type="${InputType.CHECKBOX}"
-                                  ?disabled="${controlsDisabled}" .value="${!controlsDisabled && interval !== undefined}"
-                                  @or-mwc-input-changed="${(e) => this._onAttributesIntervalUpdate(e.detail.value ? 1 : undefined)}"
-                    ></or-mwc-input>
-                    <div class="gateway-sharing-control-child">
-                        <or-mwc-input .type="${InputType.NUMBER}" compact outlined ?disabled="${intervalDisabled}" .value="${controlsDisabled ? undefined : interval}" style="width: 84px;"
-                                      @or-mwc-input-changed="${(e) => this._onAttributesIntervalUpdate(e.detail.value)}"
-                        ></or-mwc-input>
-                        <or-translate value="gateway.limit_sharing_rate_suffix"></or-translate>
-                    </div>
-                </div>
-            </div>
+            return html `
+            <div id="gateway-column-3" class="gateway-column">
+                ${when(isCustom, () => html `
+                    <or-translate value="gateway.limit_sharing_is_custom_error"></or-translate>
+                `, () => html `
+                    <div></div>
+                `)}
+                <div class="gateway-sharing-control" style="${controlStyling}">
+                    <or-mwc-input .label="${i18next.t("gateway.limit_sharing_attribute")}" .type="${InputType.CHECKBOX}"
+                                  ?disabled="${controlsDisabled}" .value="${controlsDisabled ? undefined : filterChecked}"
+                                  @or-mwc-input-changed="${(e) => this._onLimitAttributesCheck(e)}"
+                    ></or-mwc-input>
+                    <div class="gateway-sharing-control-child">
+                        <or-mwc-input .type="${InputType.BUTTON}" raised ?disabled="${filterDisabled}"
+                                      label="${attrAmount || 0} ${i18next.t("gateway.limit_sharing_attribute_selected")}"
+                                      @or-mwc-input-changed="${(e) => this._onLimitAttributesButtonClick(e)}"
+                        ></or-mwc-input>
+                    </div>
+                </div>
+                <div class="gateway-sharing-control"  style="${controlStyling}">
+                    <or-mwc-input .label="${i18next.t("gateway.limit_sharing_rate")}" .type="${InputType.CHECKBOX}"
+                                  ?disabled="${controlsDisabled}" .value="${!controlsDisabled && interval !== undefined}"
+                                  @or-mwc-input-changed="${(e) => this._onAttributesIntervalUpdate(e.detail.value ? 1 : undefined)}"
+                    ></or-mwc-input>
+                    <div class="gateway-sharing-control-child">
+                        <or-mwc-input .type="${InputType.NUMBER}" compact outlined ?disabled="${intervalDisabled}" .value="${controlsDisabled ? undefined : interval}" style="width: 84px;"
+                                      @or-mwc-input-changed="${(e) => this._onAttributesIntervalUpdate(e.detail.value)}"
+                        ></or-mwc-input>
+                        <or-translate value="gateway.limit_sharing_rate_suffix"></or-translate>
+                    </div>
+                </div>
+            </div>
         `;
         });
     }
     _getAssetSyncRulesColumns(connection_1) {
         return __awaiter(this, arguments, void 0, function* (connection, disabled = true) {
             const controlStyling = disabled ? "--mdc-theme-text-primary-on-background: lightgray; color: lightgray" : undefined;
-            return html `
-            <div id="gateway-column-4" class="gateway-column">
-                <div class="gateway-sharing-control"  style="${controlStyling}">
-                    <or-mwc-input .label="${i18next.t("gateway.assetSyncRulesEnable")}" .type="${InputType.CHECKBOX}"
-                                  ?disabled="${disabled}" .value="${!!connection.assetSyncRules}"
-                                  @or-mwc-input-changed="${(e) => this._onAssetSyncRulesToggle(!!e.detail.value)}"
-                    ></or-mwc-input>
-                    <div class="gateway-sharing-control-child">
-                        <or-mwc-input .type="${InputType.JSON_OBJECT}" ?disabled="${disabled || !connection.assetSyncRules}" 
-                                      .value="${connection === null || connection === void 0 ? void 0 : connection.assetSyncRules}"
-                                      resizevertical
-                                      @or-mwc-input-changed="${(e) => this._setConnectionProperty("assetSyncRules", e.detail.value)}"
-                                      .label="${i18next.t('gateway.assetSyncRulesInput')}" style="width: 100%;"></or-mwc-input>
-                        <or-translate value=""></or-translate>
-                    </div>
-                </div>
-            </div>
+            return html `
+            <div id="gateway-column-4" class="gateway-column">
+                <div class="gateway-sharing-control"  style="${controlStyling}">
+                    <or-mwc-input .label="${i18next.t("gateway.assetSyncRulesEnable")}" .type="${InputType.CHECKBOX}"
+                                  ?disabled="${disabled}" .value="${!!connection.assetSyncRules}"
+                                  @or-mwc-input-changed="${(e) => this._onAssetSyncRulesToggle(!!e.detail.value)}"
+                    ></or-mwc-input>
+                    <div class="gateway-sharing-control-child">
+                        <or-mwc-input .type="${InputType.JSON_OBJECT}" ?disabled="${disabled || !connection.assetSyncRules}" 
+                                      .value="${connection === null || connection === void 0 ? void 0 : connection.assetSyncRules}"
+                                      resizevertical
+                                      @or-mwc-input-changed="${(e) => this._setConnectionProperty("assetSyncRules", e.detail.value)}"
+                                      .label="${i18next.t('gateway.assetSyncRulesInput')}" style="width: 100%;"></or-mwc-input>
+                        <or-translate value=""></or-translate>
+                    </div>
+                </div>
+            </div>
         `;
         });
     }
@@ -626,8 +626,8 @@ let PageGateway = class PageGateway extends Page {
         const editorRef = createRef();
         showDialog(new OrMwcDialog()
             .setHeading("JSON Editor")
-            .setContent(html `
-                <or-ace-editor ${ref(editorRef)} .value="${connection === null || connection === void 0 ? void 0 : connection.attributeFilters}" style="height: 60vh; width: 1024px;"></or-ace-editor>
+            .setContent(html `
+                <or-ace-editor ${ref(editorRef)} .value="${connection === null || connection === void 0 ? void 0 : connection.attributeFilters}" style="height: 60vh; width: 1024px;"></or-ace-editor>
             `)
             .setActions([
             { actionName: "cancel", content: "cancel" },

package/lib/pages/page-insights.js

@@ -41,16 +41,16 @@ export function pageInsightsProvider(store, config) {
 let PageInsights = class PageInsights extends Page {
     static get styles() {
         // language=CSS
-        return css `
-
-            :host {
-                overflow: hidden; 
-            }
-            
-            #builder {
-                z-index: 0;
-                background: transparent;
-            }
+        return css `
+
+            :host {
+                overflow: hidden; 
+            }
+            
+            #builder {
+                z-index: 0;
+                background: transparent;
+            }
         `;
     }
     /* ------------------ */
@@ -84,15 +84,15 @@ let PageInsights = class PageInsights extends Page {
         super.connectedCallback();
     }
     render() {
-        return html `
-            <div style="width: 100%;">
-                <or-dashboard-builder id="builder" .editMode="${this._editMode}" .fullscreen="${this._fullscreen}" .selectedId="${this._dashboardId}"
-                                      .realm="${manager.displayRealm}" .userId="${this._userId}" .readonly="${!manager.hasRole("write:insights" /* ClientRole.WRITE_INSIGHTS */)}"
-                                      @selected="${(event) => { var _a; this._dashboardId = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.id; }}"
-                                      @editToggle="${(event) => { this._editMode = event.detail; this._fullscreen = true; this._updateRoute(false); }}"
-                                      @fullscreenToggle="${(event) => { this._fullscreen = event.detail; }}"
-                ></or-dashboard-builder>
-            </div>
+        return html `
+            <div style="width: 100%;">
+                <or-dashboard-builder id="builder" .editMode="${this._editMode}" .fullscreen="${this._fullscreen}" .selectedId="${this._dashboardId}"
+                                      .realm="${manager.displayRealm}" .userId="${this._userId}" .readonly="${!manager.hasRole("write:insights" /* ClientRole.WRITE_INSIGHTS */)}"
+                                      @selected="${(event) => { var _a; this._dashboardId = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.id; }}"
+                                      @editToggle="${(event) => { this._editMode = event.detail; this._fullscreen = true; this._updateRoute(false); }}"
+                                      @fullscreenToggle="${(event) => { this._fullscreen = event.detail; }}"
+                ></or-dashboard-builder>
+            </div>
         `;
     }
     stateChanged(state) {

package/lib/pages/page-logs.js

@@ -25,15 +25,15 @@ export function pageLogsProvider(store, config) {
 let PageLogs = class PageLogs extends Page {
     static get styles() {
         // language=CSS
-        return css `
-            :host {
-                flex: 1;
-                width: 100%;            
-            }
-            
-            or-log-viewer {
-                width: 100%;
-            }
+        return css `
+            :host {
+                flex: 1;
+                width: 100%;            
+            }
+            
+            or-log-viewer {
+                width: 100%;
+            }
         `;
     }
     get name() {
@@ -46,8 +46,8 @@ let PageLogs = class PageLogs extends Page {
     }
     render() {
         var _a;
-        return html `
-            <or-log-viewer .config="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.viewer}"></or-log-viewer>
+        return html `
+            <or-log-viewer .config="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.viewer}"></or-log-viewer>
         `;
     }
 };