@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-131882.2 → 0.0.0-bugfix-dev-KB-174860.0

package/dist/collection/components/snk-crud/subcomponents/snk-detail-view/snk-detail-view.js

@@ -1,7 +1,7 @@
 import { Action as DUAction, KeyboardManager, StringUtils } from '@sankhyalabs/core';
-import { Host, forceUpdate, h } from '@stencil/core';
+import { forceUpdate, h, Host, } from '@stencil/core';
 import { SnkFormConfigManager } from '../../../snk-form-config/SnkFormConfigManager';
-import { buildFormMetadata } from "@sankhyalabs/ezui/dist/collection/utils/form";
+import { buildFormMetadata } from '@sankhyalabs/ezui/dist/collection/utils/form';
 import { PresentationMode } from '../../../../lib';
 import { TaskbarElement } from '../../../snk-taskbar/elements/taskbar-elements';
 import { VIEW_MODE } from '../../../../lib/utils/constants';
@@ -189,25 +189,30 @@ export class SnkDetailView {
     return [];
   }
   emitSwitchEvent(mode) {
+    if (mode === VIEW_MODE.GRID) {
+      this.dataUnit.isMultipleEdition = false;
+    }
     const guideId = mode === VIEW_MODE.GRID ? this.stripFormPattern(this.branchGuide.id) : this.getFormGuideId();
     if (guideId) {
       this.snkSwitchGuide.emit(guideId);
     }
   }
-  handleAttachBack() {
-    this._viewStack.show(VIEW_MODE.GRID);
-  }
   executeActionHandler(evt) {
     if (evt.detail === TaskbarElement.GRID_MODE) {
       this.emitSwitchEvent(VIEW_MODE.GRID);
       evt.stopPropagation();
     }
+    if (evt.detail === TaskbarElement.UPDATE_MULTIPLE) {
+      this.dataUnit.isMultipleEdition = true;
+      this.emitSwitchEvent(VIEW_MODE.FORM);
+      evt.stopPropagation();
+    }
     if (evt.detail === TaskbarElement.FORM_MODE || evt.detail === TaskbarElement.UPDATE) {
       this.emitSwitchEvent(VIEW_MODE.FORM);
       evt.stopPropagation();
     }
     if (evt.detail === TaskbarElement.ATTACH) {
-      this._viewStack.show(VIEW_MODE.ATTACHMENT);
+      this._snkAttach.open();
       evt.stopPropagation();
     }
   }
@@ -246,6 +251,12 @@ export class SnkDetailView {
       this.addErrorBadgeToBranchGuide();
     }
     else if (action.type === DUAction.DATA_LOADED) {
+      this.handleDataLoaded();
+    }
+  }
+  handleDataLoaded() {
+    var _a;
+    if (!((_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectedRecord())) {
       this.dataUnit.selectFirst();
     }
   }
@@ -302,7 +313,7 @@ export class SnkDetailView {
   render() {
     this.updateLabel();
     //const cardConfig: IFormCardConfig = this._cardsState?.get(this.selectedForm);
-    return (h(Host, null, h("snk-data-unit", { ref: (el) => this._snkDataUnit = el, dataUnitName: `${this.dataUnitName}`, onDataUnitReady: evt => this.dataUnitReadyHandler(evt), entityName: this.entityName, onDataStateChange: this.handleDataStateChange.bind(this), ignoreSaveMessage: this._currentView === VIEW_MODE.GRID, messagesBuilder: this.messagesBuilder, configName: this._configName }, h("ez-view-stack", { ref: (ref) => this.updateViewStack(ref) }, h("stack-item", null, h("div", { class: "ez-box ez-box--shadow grid-container" }, h("div", { class: "ez-title--primary ez-size-width--full ez-padding--large detail-header" }, h("div", { class: "ez-flex ez-text ez-text--bold ez-flex--justify-start ez-flex--align-items-center" }, this._levelPath ? h("span", { class: "level-path" }, this._levelPath + " /") : undefined, this.label)), h("snk-grid", { class: "ez-size-width--full", ref: (ref) => this._snkGrid = ref, configName: this._configName, messagesBuilder: this.messagesBuilder, onGridDoubleClick: () => this.emitSwitchEvent(VIEW_MODE.FORM), onActionClick: (evt) => this.executeActionHandler(evt), presentationMode: this.presentationMode, canEdit: this.canEdit, isDetail: true, taskbarCustomContainerId: this.taskbarCustomContainerId, gridHeaderCustomSlotId: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS", topTaskbarCustomSlotId: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS", outlineMode: false, enableGridInsert: true }))), h("stack-item", null, h("snk-form-view", { ref: (ref) => this._snkFormView = ref, canExpand: false, canFix: false, name: this.selectedForm, formMetadata: this._formMetadata, dataUnit: this.dataUnit, fields: this.getFormFields(), fieldToFocus: this._fieldToGetFocus, label: this.label, levelPath: this._levelPath, onFormItemsReady: ({ detail: formItems }) => this.formItemsReady.emit(formItems), onSnkRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this), fieldSearch: this._fieldSearch, entityPath: this.entityName }, h("snk-taskbar", { key: "guideViewerTaskbar", class: "form-taskbar", "data-element-id": "guideViewer", configName: this._configName, messagesBuilder: this.messagesBuilder, disabledButtons: this._disabledButtons, buttons: "INSERT,PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,CONFIGURATOR", primaryButton: "INSERT", presentationMode: this.presentationMode, onActionClick: evt => this.executeActionHandler(evt), dataUnit: this.dataUnit, resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: "DETAIL_TASKBAR_CUSTOM_ELEMENTS", actionsSettingsList: this.getSettingsListForm() }, h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" })))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this.entityName, onBack: this.handleAttachBack.bind(this) }))))));
+    return (h(Host, null, h("snk-data-unit", { ref: (el) => this._snkDataUnit = el, dataUnitName: `${this.dataUnitName}`, onDataUnitReady: evt => this.dataUnitReadyHandler(evt), entityName: this.entityName, onDataStateChange: this.handleDataStateChange.bind(this), ignoreSaveMessage: this._currentView === VIEW_MODE.GRID, messagesBuilder: this.messagesBuilder, configName: this._configName }, h("ez-view-stack", { ref: (ref) => this.updateViewStack(ref) }, h("stack-item", null, h("div", { class: "ez-box ez-box--shadow grid-container" }, h("div", { class: "ez-title--primary ez-size-width--full ez-padding--large detail-header" }, h("div", { class: "ez-flex ez-text ez-text--bold ez-flex--justify-start ez-flex--align-items-center" }, this._levelPath ? h("span", { class: "level-path" }, this._levelPath + " /") : undefined, this.label)), h("snk-grid", { class: "ez-size-width--full", ref: (ref) => this._snkGrid = ref, configName: this._configName, messagesBuilder: this.messagesBuilder, onGridDoubleClick: () => this.emitSwitchEvent(VIEW_MODE.FORM), onActionClick: (evt) => this.executeActionHandler(evt), presentationMode: this.presentationMode, canEdit: this.canEdit, isDetail: true, taskbarCustomContainerId: this.taskbarCustomContainerId, gridHeaderCustomSlotId: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS", topTaskbarCustomSlotId: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS", outlineMode: false, enableGridInsert: true, autoLoad: true, multipleEditionEnabled: true, multipleSelection: true }))), h("stack-item", null, h("snk-form-view", { ref: (ref) => this._snkFormView = ref, canExpand: false, canFix: false, name: this.selectedForm, formMetadata: this._formMetadata, dataUnit: this.dataUnit, fields: this.getFormFields(), fieldToFocus: this._fieldToGetFocus, label: this.label, levelPath: this._levelPath, onFormItemsReady: ({ detail: formItems }) => this.formItemsReady.emit(formItems), onSnkRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this), fieldSearch: this._fieldSearch, entityPath: this.entityName }, h("snk-taskbar", { key: "guideViewerTaskbar", class: "form-taskbar", "data-element-id": "guideViewer", configName: this._configName, messagesBuilder: this.messagesBuilder, disabledButtons: this._disabledButtons, buttons: "INSERT,PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,ACTIONS_BUTTON,DIVIDER,GRID_MODE,CONFIGURATOR", primaryButton: "INSERT", presentationMode: this.presentationMode, onActionClick: evt => this.executeActionHandler(evt), dataUnit: this.dataUnit, resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: "DETAIL_TASKBAR_CUSTOM_ELEMENTS", actionsSettingsList: this.getSettingsListForm() }, h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))))), h("snk-attach", { ref: (ref) => this._snkAttach = ref, registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this.entityName }))));
   }
   static get is() { return "snk-detail-view"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-crud/subcomponents/snk-entity-search.css

@@ -0,0 +1,17 @@
+.entity-search-popover {
+    width: 432px;
+
+    font-family: var(--font-pattern, "Roboto");
+    color: var(--color--gray-600, #1C1D22);
+    text-shadow: 0 0 var(--color--gray-500, #494A4E), 0 0 1px transparent;
+    font-size: var(--font-size--large, 18px);
+
+    padding: var(--space--24, 24px);
+    max-width: 430px;
+    display: flex;
+    flex-direction: column;
+}
+
+.entity-search-popover label {
+    margin-bottom: var(--space--16, 16px);
+}

package/dist/collection/components/snk-crud/subcomponents/snk-entity-search.js

@@ -0,0 +1,330 @@
+import { ApplicationContext, ElementIDUtils, KeyboardManager } from "@sankhyalabs/core";
+import { Host, h } from "@stencil/core";
+export class SnkEntitySearch {
+  constructor() {
+    this.SEARCH_DESCRIPTION_TIMEOUT = 300;
+    this._entityPKField = null;
+    this.searchEntitySelect = async (item) => {
+      if (!this._entityPKField || !item) {
+        return;
+      }
+      try {
+        const pk = [{ name: this._entityPKField, value: item.value }];
+        await this.closeSearchPopover();
+        await this.refreshDataUnitByPk(pk);
+      }
+      catch (error) {
+        console.error('Erro ao selecionar entidade:', error);
+      }
+    };
+    this.entityName = "";
+    this.dataUnit = undefined;
+    this.messagesBuilder = undefined;
+    this._searchInputValue = "";
+    this._showMoreOnSearch = false;
+    this.visibleOptions = [];
+    this.value = undefined;
+    this.showLoading = true;
+  }
+  async showUnder(element) {
+    await this._popoverSearchEntity.showUnder(element, { horizontalGap: 12, verticalGap: 4 });
+  }
+  buildSearchOptions(limit) {
+    return {
+      entity: this.entityName,
+      entityDescription: this.entityName,
+      executeOnOpen: true,
+      searchOptions: {
+        localEntityName: this.entityName,
+        limit,
+      }
+    };
+  }
+  async handlePredictiveSearch(argument) {
+    var _a, _b;
+    const response = await this._application.executePreparedSearchWithFullResponse(argument, this.buildSearchOptions(5));
+    this._showMoreOnSearch = (_a = response === null || response === void 0 ? void 0 : response.hasMore) !== null && _a !== void 0 ? _a : false;
+    this._entityPKField = response === null || response === void 0 ? void 0 : response.pkField;
+    return (_b = response === null || response === void 0 ? void 0 : response.data) !== null && _b !== void 0 ? _b : [];
+  }
+  async loadEntitySuggestions(argument) {
+    var _a;
+    const value = (_a = argument === null || argument === void 0 ? void 0 : argument.argument) !== null && _a !== void 0 ? _a : '';
+    const mode = (argument === null || argument === void 0 ? void 0 : argument.mode) || "PREDICTIVE";
+    if (!value || value.trim().length === 0) {
+      return [];
+    }
+    try {
+      this._showMoreOnSearch = false;
+      if (mode === "PREDICTIVE") {
+        return await this.handlePredictiveSearch(value);
+      }
+      const searchResult = await this._application.executePreparedSearch(mode, value, this.buildSearchOptions());
+      return Array.isArray(searchResult) ? searchResult : [searchResult];
+    }
+    catch (error) {
+      console.error('Erro ao carregar sugestões de entidades:', error);
+      return [];
+    }
+  }
+  async refreshDataUnitByPk(pks) {
+    try {
+      const pkField = pks[0].name;
+      const pkValue = pks[0].value;
+      // Criar filtro para a busca específica
+      const quickFilter = {
+        term: '',
+        filter: {
+          name: '',
+          params: [],
+          expression: `(${pkField} = ${pkValue})`
+        }
+      };
+      // Carregar dados com o filtro aplicado diretamente
+      await this.dataUnit.loadData(quickFilter);
+      this.loaded.emit(this.dataUnit.records);
+    }
+    catch (error) {
+      console.error('Erro ao atualizar dataset:', error);
+    }
+  }
+  async closeSearchPopover() {
+    if (this._popoverSearchEntity && this._popoverSearchEntity.opened) {
+      await this._popoverSearchEntity.hide();
+    }
+  }
+  async handleOnEzVisibilityChange(event) {
+    if (event.detail) {
+      await this._textInput.setFocus();
+    }
+  }
+  async handleSelectItem(evt) {
+    const currentOpt = evt.detail;
+    this.value = currentOpt;
+    await this._popoverListResult.hide();
+    await this.searchEntitySelect(currentOpt);
+    this._searchInputValue = "";
+  }
+  updateKeyOption(option) {
+    return (Object.assign(Object.assign({}, option), { presentationValue: option.value, presentationLabel: option.label }));
+  }
+  async handleInputChange(value) {
+    if (this._debounceSearch) {
+      clearTimeout(this._debounceSearch);
+    }
+    return new Promise((resolve) => {
+      this._debounceSearch = setTimeout(async () => {
+        var _a;
+        this.showLoading = true;
+        this._searchInputValue = value;
+        await this._popoverListResult.showUnder(this._textInput);
+        this.visibleOptions = (_a = (await this.loadEntitySuggestions({ argument: this._searchInputValue, mode: undefined }))) === null || _a === void 0 ? void 0 : _a.map(this.updateKeyOption);
+        this.showLoading = false;
+        resolve();
+      }, this.SEARCH_DESCRIPTION_TIMEOUT);
+    });
+  }
+  isOptionsVisible() {
+    return this._popoverListResult.opened;
+  }
+  async handleArrowUp() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    await this._searchList.previousOption();
+  }
+  async handleArrowDown() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    await this._searchList.nextOption();
+  }
+  async selectCurrentItem() {
+    var _a;
+    await ((_a = this._searchList) === null || _a === void 0 ? void 0 : _a.selectCurrentItem());
+  }
+  async cancelSelection() {
+    var _a, _b;
+    await ((_a = this._searchList) === null || _a === void 0 ? void 0 : _a.cancelSelection());
+    (_b = this._popoverListResult) === null || _b === void 0 ? void 0 : _b.hide();
+  }
+  async handleInputTab() {
+    await this.cancelSelection();
+  }
+  async handleInputEsc() {
+    await this.cancelSelection();
+  }
+  getMessage(key, params) {
+    if (this.messagesBuilder) {
+      return this.messagesBuilder.getMessage(key, params);
+    }
+    // Fallback para mensagens padrão em português
+    const messages = {
+      'snkCrud.entitySearch.label': 'Busca por registros',
+      'snkCrud.entitySearch.placeholder': 'Digite o que você procura aqui...'
+    };
+    return messages[key] || key;
+  }
+  async initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager();
+    const defaultOpts = { element: this._elem, propagate: true };
+    this._keyboardManager
+      .bind("ArrowUp", () => this.handleArrowUp(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
+      .bind("ArrowDown", () => this.handleArrowDown(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
+      .bind("Enter", () => this.selectCurrentItem(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
+      .bind("Tab", () => this.handleInputTab(), defaultOpts)
+      .bind("Escape", () => this.handleInputEsc(), defaultOpts);
+  }
+  connectedCallback() {
+    this.initKeyboardManager();
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'snk-entity-search');
+  }
+  disconnectedCallback() {
+    this._keyboardManager
+      .unbind("ArrowUp")
+      .unbind("ArrowDown")
+      .unbind("Enter")
+      .unbind("Tab")
+      .unbind("Escape");
+  }
+  render() {
+    return (h(Host, null, h("ez-popover-core", { ref: (ref) => this._popoverSearchEntity = ref, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event) }, h("div", { class: "entity-search-popover" }, h("label", null, this.getMessage('snkCrud.entitySearch.label')), h("ez-classic-input", { ref: (ref) => this._textInput = ref, placeholder: this.getMessage('snkCrud.entitySearch.placeholder'), rightIconClickable: true, size: "small", value: this._searchInputValue, onEzChange: (evt) => this.handleInputChange(evt.detail) }), h("ez-popover-core", { ref: elem => this._popoverListResult = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => event.stopPropagation() }, h("ez-search-result-list", { ref: (ref) => this._searchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, onChangeValue: (evt) => this.handleSelectItem(evt) }))))));
+  }
+  static get is() { return "snk-entity-search"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-entity-search.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-entity-search.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "entityName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da entidade que ser\u00E1 pesquisada."
+        },
+        "attribute": "entity-name",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Refer\u00EAncia ao DataUnit que ser\u00E1 atualizado com o registro selecionado."
+        }
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Construtor de mensagens para internacionaliza\u00E7\u00E3o."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_searchInputValue": {},
+      "_showMoreOnSearch": {},
+      "visibleOptions": {},
+      "value": {},
+      "showLoading": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "loaded",
+        "name": "loaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando os registros s\u00E3o carregados."
+        },
+        "complexType": {
+          "original": "Record[]",
+          "resolved": "Record[]",
+          "references": {
+            "Record": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showUnder": {
+        "complexType": {
+          "signature": "(element: HTMLElement) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_elem"; }
+}

package/dist/collection/components/snk-crud/subcomponents/snk-form-view.js

@@ -171,9 +171,6 @@ export class SnkFormView {
   async componentWillLoad() {
     await this.initLayoutFormConfig();
   }
-  async componentWillLoad() {
-    await this.initLayoutFormConfig();
-  }
   componentDidLoad() {
     this.observePropsCustomEditor(this.customEditors);
     this.observeFieldsProps(this.fieldsProps);

package/dist/collection/components/snk-crud/subcomponents/snk-guides-viewer.css

@@ -4,37 +4,51 @@
     /*@doc Define o espaçamento médio utilizado no componente.*/
     --snk-guides-viewer--space-small: var(--space--2xs, 8px);
     /*@doc Define a altura mínima do cabeçalho do componente.*/
-    --snk-guides-viewer__header--min-height: 68px;
+    --snk-guides-viewer__header--min-height: 132px;
     /*@doc Define a posição de z-index do cabeçalho do componente.*/
     --snk-guides-viewer__header--z-index: var(--more-visible, 2);
     /*@doc Define a cor de fundo do cabeçalho do componente.*/
     --snk-guides-viewer__header--background-color: var(--background--body, #fafcff);
     /*@doc Define a largura do guide-navigator do componente.*/
     --snk-guides-viewer__guide-navigator--width: 340px;
+    /*@doc Define a altura do header do workspace.*/
+    --snk-workspace--header-height: 40px;
 
     /*private*/
     display: block;
+    outline: none;
+}
+
+ez-guide-navigator {
+    --ez-guide-navigator--border-radius: var(--space--12, 12px);
 }
 
 snk-form-view {
     width: 100%;
 }
+stack-item.snk-guides-viewer {
+    display: grid;
+}
+stack-item.sc-snk-guides-viewer {
+    display: grid;
+    min-height: 100%;
+}
 
 .snk-guides-viewer {
     /*private*/
     position: relative;
-    padding-left: 0px;
-    padding-top: 0px;
 
     /*public*/
-    padding-right: var(--snk-guides-viewer--space-large);
-    padding-bottom: var(--snk-guides-viewer--space-large);
+    padding: 0 var(--snk-guides-viewer--space-small);
+    padding-bottom: var(--snk-guides-viewer--space-small);
 }
 
 .snk-guides-viewer__detail-container{
     display: flex;
     row-gap: 24px;
     flex-direction: column;
+    max-height: calc(100vh - var(--snk-guides-viewer__header--min-height));
+    overflow-y: auto;
 }
 
 .snk-guides-viewer__header {
@@ -73,7 +87,7 @@ snk-form-view {
     height: 100%;
 
     /*public*/
-    column-gap: var(--snk-guides-viewer--space-large);
+    column-gap: var(--snk-guides-viewer--space-small);
 }
 
 .snk-guides-viewer__guide-navigator {
@@ -81,8 +95,8 @@ snk-form-view {
     position: sticky;
 
     /*public*/
-    top: calc(var(--snk-guides-viewer__header--min-height) + var(--snk-guides-viewer--space-small));
-    height: calc(100vh - var(--snk-guides-viewer__header--min-height) - var(--snk-guides-viewer--space-large) - var(--snk-guides-viewer--space-small));
+    top: var(--snk-guides-viewer--space-small);
+    height: calc(100vh - var(--snk-guides-viewer__header--min-height));
 }
 
 .snk-guides-viewer__guide-navigator[open] {