@genexus/genexus-ide-ui 0.0.66 → 0.0.67

package/dist/collection/components/team-dev/select-recent-comment/{team-dev-select-recent-comment.js → select-recent-comment.js}

@@ -23,6 +23,7 @@ export class GxIdeTeamDevSelectRecentComment {
     this.cancelCallbackHandle = async () => {
       await this.cancelCallback();
     };
+    this.displayTitle = false;
     this.comments = undefined;
     this.confirmCallback = undefined;
     this.cancelCallback = undefined;
@@ -40,23 +41,41 @@ export class GxIdeTeamDevSelectRecentComment {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this._componentLocale.componentName, displayBorder: true, noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("gx-ide-list-selector", { type: "single-selection", listName: "recent-comments", noListBorder: true, ordered: true, onSelectionChanged: this.commentSelectionChangedHandler, class: "recent-comments-list" }, renderListItems(commentsToListItemsData(this.comments))), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle, slot: "footer-end" }, this._componentLocale.cancelButton), h("gxg-button", { type: "primary-text-only", onClick: this.confirmCallbackHandle, slot: "footer-end" }, this._componentLocale.confirmButton)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { containerTitle: this.displayTitle ? this._componentLocale.componentName : null, displayBorder: true, noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("gx-ide-list-selector", { type: "single-selection", listName: "recent-comments", noListBorder: true, ordered: true, onSelectionChanged: this.commentSelectionChangedHandler, class: "recent-comments-list" }, renderListItems(commentsToListItemsData(this.comments))), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle, slot: "footer-end" }, this._componentLocale.cancelButton), h("gxg-button", { type: "primary-text-only", onClick: this.confirmCallbackHandle, slot: "footer-end" }, this._componentLocale.confirmButton)))));
   }
   static get is() { return "gx-ide-team-dev-select-recent-comment"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["team-dev-select-recent-comment.scss"]
+      "$": ["select-recent-comment.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["team-dev-select-recent-comment.css"]
+      "$": ["select-recent-comment.css"]
     };
   }
-  static get assetsDirs() { return ["gx-ide-assets/team-dev-select-recent-comment"]; }
+  static get assetsDirs() { return ["gx-ide-assets/select-recent-comment"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "comments": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/team-dev/update/{team-dev-update.css → update.css}

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }
@@ -209,8 +221,6 @@ gxg-tabs {
   flex: 1;
 }
 
-/* Options */
-/* filters */
 /* Data Grid*/
 .data-grid {
   grid-template-columns: repeat(3, 1fr);
@@ -246,4 +256,9 @@ gxg-tabs {
 
 .bold {
   font-weight: bold;
+}
+
+/*--- Results ---*/
+ch-grid-rowset-empty {
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
 }

package/dist/collection/components/team-dev/update/{team-dev-update.js → update.js}

@@ -41,7 +41,10 @@ export class GxIdeTeamDevUpdate {
       }
     };
     this.genexusServerUrlHandler = () => {
-      console.log("hola");
+      var _a;
+      if ((_a = this.updateFrom) === null || _a === void 0 ? void 0 : _a.serverUrl) {
+        window.open(this.updateFrom.serverUrl);
+      }
     };
     this.renderOptions = () => {
       return (h("div", { class: "options-wrapper" }, h("gx-ide-container", { part: "options-update-from", containerTitle: this._componentLocale.options.updateFrom, titleType: "secondary", contentBorderEnd: true, noContentPadding: true }, h("gx-ide-list-selector", { type: "single-selection", listName: "commit-recent-messages", readonly: true, noListBorder: true }, h("gx-ide-list-selector-item", { icon: "window-tools/genexus-cloud", itemId: "genexus-server", itemValue: undefined, class: "genexus-server", onClick: this.genexusServerUrlHandler }, `${this._componentLocale.options.updateFrom}:`, h("gxg-text", { type: "text-link" }, this.updateFrom ? this.updateFrom.serverUrl : "")), h("gx-ide-list-selector-item", { icon: "general/knowledge-base", itemId: "knowledge-base", itemValue: `${this._componentLocale.options.knowledgeBase}: ${this.updateFrom ? this.updateFrom.kbName : ""}` }), h("gx-ide-list-selector-item", { icon: "general/version", itemId: "version", itemValue: `${this._componentLocale.options.version}: ${this.updateFrom ? this.updateFrom.versionName : ""}` }), h("gx-ide-list-selector-item", { icon: "window-tools/last-changes-view", itemId: "last-full-update", itemValue: `${this._componentLocale.options.lastFullUpdate}:${formatDate(this.updateFrom.lastFullUpdate)}` }))), h("gx-ide-container", { part: "options-scope", containerTitle: this._componentLocale.options.scope, titleType: "secondary" }, h("div", { class: "scope" }, h("div", { class: "row" }, h("gxg-label", { labelPosition: "start", center: true, noMargin: true }, this._componentLocale.options.objects, ":"), h("span", { class: {
@@ -135,6 +138,7 @@ export class GxIdeTeamDevUpdate {
       return h("gxg-icon", { type: type, color: color });
     };
     this.loadData = async () => {
+      console.log("load");
       const filters = {
         pattern: this.showFilter ? this.filterPatternEl.value : null,
         type: this.showFilter ? this.filterTypeEl.value : null
@@ -228,6 +232,7 @@ export class GxIdeTeamDevUpdate {
       ignoredObjects: []
     };
     this.updateResultData = [];
+    this.displayTitle = false;
     this.confirmCallback = undefined;
     this.gridContextMenuCallback = undefined;
     this.loadCallback = undefined;
@@ -265,31 +270,48 @@ export class GxIdeTeamDevUpdate {
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
   /**
-   * Validate necessary data input
+   * The method used by the host to instruct the component to force a data reload in the grids.
    */
-  async validate() {
-    const isValid = true;
-    return isValid;
+  async reload() {
+    this.loadData();
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderTop: true, noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.componentName }, this.renderOptions(), this.renderFilter(), this.renderData(), h("gxg-button", { id: "button-update", type: "primary-text-only", onClick: this.update, part: "gxg-button gxg-button--update", disabled: this.isLoading, slot: "footer-end" }, this._componentLocale.footer.btnUpdate)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderTop: true, noContentPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, this.renderOptions(), this.renderFilter(), this.renderData(), h("gxg-button", { id: "button-update", type: "primary-text-only", onClick: this.update, part: "gxg-button gxg-button--update", disabled: this.isLoading, slot: "footer-end" }, this._componentLocale.footer.btnUpdate)))));
   }
   static get is() { return "gx-ide-team-dev-update"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["team-dev-update.scss"]
+      "$": ["update.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["team-dev-update.css"]
+      "$": ["update.css"]
     };
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-update"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "confirmCallback": {
         "type": "unknown",
         "mutable": false,
@@ -567,19 +589,19 @@ export class GxIdeTeamDevUpdate {
   }
   static get methods() {
     return {
-      "validate": {
+      "reload": {
         "complexType": {
-          "signature": "() => Promise<boolean>",
+          "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<boolean>"
+          "return": "Promise<void>"
         },
         "docs": {
-          "text": "Validate necessary data input",
+          "text": "The method used by the host to instruct the component to force a data reload in the grids.",
           "tags": []
         }
       }

package/dist/collection/components/team-dev/update-partial-selection/gx-ide-assets/team-dev-update-partial-selection/langs/team-dev-update-partial-selection.lang.en.json

@@ -1,5 +1,5 @@
 {
-  "name": "Name",
+  "componentName": "Team Dev Update Partial Selection",
   "title": "Partial Selection",
   "btnAddObject": "Add",
   "btnRemoveSelectedObjects": "Remove Selected",

package/dist/collection/components/team-dev/update-partial-selection/{team-dev-update-partial-selection.css → update-partial-selection.css}

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }

package/dist/collection/components/team-dev/update-partial-selection/{team-dev-update-partial-selection.js → update-partial-selection.js}

@@ -45,11 +45,12 @@ export class GxIdeTeamDevUpdatePartialSelection {
         this.selectedObjectsIds = ev.detail.rowsId;
       });
     };
+    this.selectedObjectsIds = [];
+    this.displayTitle = false;
     this.addCallback = undefined;
     this.cancelCallback = undefined;
     this.confirmCallback = undefined;
     this.selection = [];
-    this.selectedObjectsIds = [];
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
@@ -76,23 +77,41 @@ export class GxIdeTeamDevUpdatePartialSelection {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this._componentLocale.title, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", icon: "gemini-tools/add", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.btnAddObject), h("gxg-button", { id: "button-remove", type: "secondary-text-only", onClick: this.removeSelectedObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.btnRemoveSelectedObjects)), this.renderObjects(), h("gxg-text", { id: "button-clear", type: "button-like", onClick: this.removeAllHandler, disabled: !(this.selection.length > 0), part: "clear", slot: "footer-start" }, this._componentLocale.footer.btnRemoveAll), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm", slot: "footer-end" }, this._componentLocale.footer.btnConfirm)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", icon: "gemini-tools/add", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.btnAddObject), h("gxg-button", { id: "button-remove", type: "secondary-text-only", onClick: this.removeSelectedObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.btnRemoveSelectedObjects)), this.renderObjects(), h("gxg-text", { id: "button-clear", type: "button-like", onClick: this.removeAllHandler, disabled: !(this.selection.length > 0), part: "clear", slot: "footer-start" }, this._componentLocale.footer.btnRemoveAll), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm", slot: "footer-end" }, this._componentLocale.footer.btnConfirm)))));
   }
   static get is() { return "gx-ide-team-dev-update-partial-selection"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["team-dev-update-partial-selection.scss"]
+      "$": ["update-partial-selection.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["team-dev-update-partial-selection.css"]
+      "$": ["update-partial-selection.css"]
     };
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-update-partial-selection"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "addCallback": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/team-dev/update-to-revision/{team-dev-update-to-revision.css → update-to-revision.css}

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,6 +172,10 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }

package/dist/collection/components/team-dev/update-to-revision/{team-dev-update-to-revision.js → update-to-revision.js}

@@ -29,6 +29,7 @@ export class GxIdeTeamDevUpdateToRevision {
     this.updateToRevisionOnFocusHandler = () => {
       this.updateToRevisionEl.checked = true;
     };
+    this.displayTitle = false;
     this.cancelCallback = undefined;
     this.confirmCallback = undefined;
     this.currentRevision = undefined;
@@ -58,23 +59,41 @@ export class GxIdeTeamDevUpdateToRevision {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this._componentLocale.componentName }, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" }))), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update", slot: "footer-end" }, this._componentLocale.footer.btnUpdate)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter, containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" }))), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel), h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update", slot: "footer-end" }, this._componentLocale.footer.btnUpdate)))));
   }
   static get is() { return "gx-ide-team-dev-update-to-revision"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["team-dev-update-to-revision.scss"]
+      "$": ["update-to-revision.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["team-dev-update-to-revision.css"]
+      "$": ["update-to-revision.css"]
     };
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-update-to-revision"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "cancelCallback": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/ww-images/gx-ide-assets/ww-images/langs/ww-images.lang.en.json

@@ -40,10 +40,10 @@
   },
   "footer": {
     "btnSelectAll": "Select All",
-    "btnNew": "New...",
+    "btnNew": "New Image",
     "btnOk": "OK",
     "btnCancel": "Cancel"
   },
   "imagesTitle": "Tiles",
-  "imagesDataTitle": "Tiles Information"
+  "imagesDataTitle": "Images Information"
 }

package/dist/collection/components/ww-images/ww-images.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -164,10 +172,15 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }
 
+/*--- Filter ---*/
 .filter--padding {
   padding: var(--gxg-container--padding);
 }
@@ -211,10 +224,12 @@ gxg-tabs {
 .filter__third-row .checkboxes-wrapper {
   display: flex;
   gap: var(--gx-ide-grid-column-gap);
-}
-.filter__third-row .all-descendants,
-.filter__third-row .modified {
-  padding-bottom: 3px;
+  border: 1px solid var(--gray-02);
+  border-radius: var(--border-radius-sm);
+  height: var(--gxg-form-text-height);
+  box-sizing: border-box;
+  align-items: center;
+  padding-inline-start: var(--spacing-comp-01);
 }
 .filter__third-row .user {
   max-width: 100% !important;
@@ -247,7 +262,16 @@ gxg-tabs {
   grid-template-columns: 1fr 220px;
   grid-column-gap: 0;
   grid-row-gap: 0;
-  flex-grow: 1;
+  overflow: auto;
+}
+
+.images-information__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.images-information__header-title {
+  flex: none;
 }
 
 /* Objects Table */
@@ -265,10 +289,13 @@ gxg-tabs {
   height: 110px;
   /*should be half the images container width (actually is 220px)*/
 }
+.images-container .image-item__container {
+  padding: var(--gxg-container--padding);
+}
 .images-container .image-item__container img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: scale-down;
 }
 .images-container .image-item__name {
   overflow: hidden;
@@ -292,4 +319,9 @@ gxg-tabs {
 .objects-count *:nth-child(2) {
   justify-content: flex-end;
   align-items: flex-start;
+}
+
+.hiChar {
+  color: var(--gx-ide-hi-char-color);
+  font-weight: 600;
 }