From 1bfe901cca0ac950cde57723b251451c10ab9fd3 Mon Sep 17 00:00:00 2001 From: Yordan Date: Tue, 16 Sep 2025 16:27:11 +0200 Subject: [PATCH 1/2] chore: update changelog to include fix for gallery gap offset issue --- .../datawidgets/web/_gallery-design-properties.scss | 6 +++++- packages/pluggableWidgets/gallery-web/CHANGELOG.md | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss index a8e08045b0..39a41f6b70 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss @@ -43,7 +43,7 @@ left: 0; right: 0; border-bottom: 1px solid var(--grid-border-color, $grid-border-color); - margin-top: calc(var(--spacing-small, $spacing-small) / 2); + margin-top: calc(var(--gallery-gap) / 2 - 1px); } } } @@ -70,6 +70,7 @@ // Grid spacing none .widget-gallery.widget-gallery-gridgap-none { .widget-gallery-items { + --gallery-gap: 0px; gap: 0; } } @@ -77,6 +78,7 @@ // Grid spacing small .widget-gallery.widget-gallery-gridgap-small { .widget-gallery-items { + --gallery-gap: var(--spacing-small, $dg-spacing-small); gap: var(--spacing-small, $spacing-small); } } @@ -84,6 +86,7 @@ // Grid spacing medium .widget-gallery.widget-gallery-gridgap-medium { .widget-gallery-items { + --gallery-gap: var(--spacing-medium, $dg-spacing-medium); gap: var(--spacing-medium, $spacing-medium); } } @@ -91,6 +94,7 @@ // Grid spacing large .widget-gallery.widget-gallery-gridgap-large { .widget-gallery-items { + --gallery-gap: var(--spacing-large, $dg-spacing-large); gap: var(--spacing-large, $spacing-large); } } diff --git a/packages/pluggableWidgets/gallery-web/CHANGELOG.md b/packages/pluggableWidgets/gallery-web/CHANGELOG.md index b495b5c31c..44e0fe4a7c 100644 --- a/packages/pluggableWidgets/gallery-web/CHANGELOG.md +++ b/packages/pluggableWidgets/gallery-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue where setting the gallery gap to 0 caused an offset, which made the bottom border of items to dissapear. + ## [3.6.1] - 2025-10-14 ### Fixed From d06772d020b2c1cbbb48b9597ea7b4d1c3cc9414 Mon Sep 17 00:00:00 2001 From: Yordan Date: Fri, 26 Sep 2025 15:15:44 +0200 Subject: [PATCH 2/2] fix: add fallback value --- .../web/_gallery-design-properties.scss | 27 ++++++------------- .../themesource/datawidgets/web/_gallery.scss | 4 ++- .../datawidgets/web/variables.scss | 3 +++ 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss index 39a41f6b70..26fe35a669 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery-design-properties.scss @@ -43,7 +43,7 @@ left: 0; right: 0; border-bottom: 1px solid var(--grid-border-color, $grid-border-color); - margin-top: calc(var(--gallery-gap) / 2 - 1px); + margin-top: calc(var(--gallery-gap, var(--spacing-small, $spacing-small)) / 2 - 1px); } } } @@ -69,34 +69,22 @@ // Grid spacing none .widget-gallery.widget-gallery-gridgap-none { - .widget-gallery-items { - --gallery-gap: 0px; - gap: 0; - } + --gallery-gap: 0px; } // Grid spacing small .widget-gallery.widget-gallery-gridgap-small { - .widget-gallery-items { - --gallery-gap: var(--spacing-small, $dg-spacing-small); - gap: var(--spacing-small, $spacing-small); - } + --gallery-gap: var(--spacing-small, $spacing-small); } // Grid spacing medium .widget-gallery.widget-gallery-gridgap-medium { - .widget-gallery-items { - --gallery-gap: var(--spacing-medium, $dg-spacing-medium); - gap: var(--spacing-medium, $spacing-medium); - } + --gallery-gap: var(--spacing-medium, $spacing-medium); } // Grid spacing large .widget-gallery.widget-gallery-gridgap-large { - .widget-gallery-items { - --gallery-gap: var(--spacing-large, $dg-spacing-large); - gap: var(--spacing-large, $spacing-large); - } + --gallery-gap: var(--spacing-large, $spacing-large); } // Pagination left @@ -118,6 +106,7 @@ } .widget-gallery-disable-selected-items-highlight { - // placeholder - // this class in needed to disable standard styles of highlighted items + // This class is needed to disable standard styles of highlighted items + // Currently no specific styles need to be overridden + /* stylelint-disable-line no-empty-rules */ } diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss index 1269d26e6a..cc160f2002 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_gallery.scss @@ -23,9 +23,11 @@ $gallery-screen-md: $screen-md; } .widget-gallery { + --gallery-gap: var(--spacing-small, $gallery-gap); + .widget-gallery-items { display: grid; - grid-gap: var(--spacing-small, $spacing-small); + grid-gap: var(--gallery-gap); /* Desktop widths diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss index f8422d31bf..8756e6e96b 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss @@ -29,6 +29,9 @@ $spacing-medium: 16px !default; $spacing-large: 24px !default; $spacing-larger: 32px !default; +// Gallery specific spacing +$gallery-gap: $spacing-small !default; + // Effects and animations $dragging-color-effect: rgba(10, 19, 37, 0.8) !default; $skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;