@gooddata/sdk-ui-dashboard 11.48.0-alpha.0 → 11.48.0-alpha.2

package/styles/css/dashboard.css

@@ -135,9 +135,9 @@
   .gd-fluidlayout-column-container::after {
     content: "";
     position: absolute;
-    right: 10px;
-    bottom: 5px;
-    left: 10px;
+    right: 0;
+    bottom: -5px;
+    left: 0;
     height: 0;
     border-bottom: 1px dashed var(--gd-palette-complementary-5, #b0beca);
   }
@@ -167,30 +167,29 @@
 }
 
 .gd-fluid-layout-row-header {
-  padding-right: 20px;
-  padding-left: 20px;
   text-align: center;
 }
-.gd-fluid-layout-row-header .gd-fluid-layout-row-header-container {
-  margin-top: 16px;
-}
 @media only screen and (min-width:641px) {
   .gd-fluid-layout-row-header {
-    padding-right: 0;
-    padding-left: 0;
     text-align: left;
   }
 }
+.gd-fluid-layout-row-header .gd-row-header-view {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 .gd-fluid-layout-row-header .gd-row-header-view .title {
-  padding: 3px 5px;
+  padding: 0 5px 3px;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }
 .gd-fluid-layout-row-header .gd-row-header-view .description {
-  padding: 4px 5px 2px;
+  padding: 0 5px 7px;
 }
 .gd-fluid-layout-row-header .gd-row-header-title-wrapper {
   display: flex;
+  align-items: center;
 }
 .gd-fluid-layout-row-header .gd-row-header-title-wrapper h2,
 .gd-fluid-layout-row-header .gd-row-header-title-wrapper h3 {
@@ -198,12 +197,14 @@
 }
 .gd-fluid-layout-row-header .gd-row-header-title-wrapper::before, .gd-fluid-layout-row-header .gd-row-header-title-wrapper::after {
   content: "";
-  position: relative;
-  top: 16px;
   flex: 1 1 auto;
   height: 0;
   border-top: 1px solid var(--gd-dashboards-section-title-lineColor, var(--gd-palette-complementary-3, #dde4eb));
 }
+.gd-fluid-layout-row-header .gd-row-header-title-wrapper.gd-editable-label-container::before, .gd-fluid-layout-row-header .gd-row-header-title-wrapper.gd-editable-label-container::after {
+  position: relative;
+  top: 2px;
+}
 .gd-fluid-layout-row-header .gd-row-header-title-wrapper::before {
   margin-right: 20px;
 }
@@ -453,14 +454,8 @@
 .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-edit--nested .placeholder {
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
-.gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view .description {
-  padding: 4px 5px 15px;
-}
 .gd-grid-layout .gd-fluid-layout-row-header-container--with-headers {
-  margin-top: 16px;
-}
-.gd-grid-layout .gd-dashboard-nested-layout-content:not(.is-dragging-widget) .gd-fluid-layout-row-header-container--no-headers {
-  margin-top: 0;
+  margin-top: 4px;
 }
 .gd-grid-layout .gd-fluidlayout-column-container {
   display: flex;
@@ -472,6 +467,13 @@
   column-gap: 20px;
   grid-auto-rows: min-content;
   flex-grow: 1;
+  /**
+   * Row separators (by default invisible) in edit mode already create spaces between items so no need to enlarge it even more there.
+   * Use :where selector to not mess up with specificity.
+   */
+}
+:where(.sdk-view-mode-on) .gd-grid-layout__container--root {
+  row-gap: 20px;
 }
 
 .gd-grid-layout__container--nested {
@@ -483,6 +485,16 @@
   position: relative;
   display: grid;
   grid-template-columns: subgrid;
+  /**
+   * Doing grid gaps in edit mode is problematical because there are lots of exceptions (such as row separators, width/height resizers) where the gaps shouldn't be,
+   * so scope it only to view mode. Use :where selector to not mess up with specificity.
+   */
+}
+:where(.sdk-view-mode-on) .gd-grid-layout__section {
+  row-gap: 20px;
+}
+:where(.sdk-view-mode-on) .gd-grid-layout__section .gd-fluid-layout-row-header {
+  margin-bottom: -20px;
 }
 
 .gd-grid-layout__item {
@@ -494,6 +506,9 @@
   max-height: inherit;
   overflow: hidden;
 }
+.gd-grid-layout__item:empty {
+  display: none;
+}
 
 .gd-grid-layout__item--span-1 {
   grid-column: span 1;
@@ -607,8 +622,8 @@
   column-gap: 6px;
   row-gap: 6px;
 }
-.gd-dash-content--density-compact .gd-grid-layout__item:empty {
-  display: none;
+.gd-dash-content--density-compact .gd-grid-layout__section .gd-fluid-layout-row-header {
+  margin-bottom: -6px;
 }
 .gd-dash-content--density-compact .gd-nested-layout-widget-renderer {
   min-height: 0 !important;
@@ -622,8 +637,11 @@
 .gd-dash-content--density-compact .gd-fluid-layout-row-header .gd-row-header-title-wrapper .gd-typography--h2 {
   font-size: 16px;
 }
+.gd-dash-content--density-compact .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view {
+  gap: 0;
+}
 .gd-dash-content--density-compact .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view .description {
-  padding: 0;
+  padding: 0 0 4px 0;
   font-size: 12px;
 }
 .gd-dash-content--density-compact .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view .description .gd-rich-text-content p {
@@ -2595,110 +2613,6 @@
   width: 100%;
 }
 
-.dash-item:hover .has-set-alert .dash-item-action-alert {
-  color: var(--gd-palette-primary-base, #14b2e2);
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
-}
-.dash-item .has-set-alert .dash-item-action-alert {
-  color: var(--gd-palette-primary-base, #14b2e2);
-  background-color: transparent;
-}
-.dash-item .has-set-alert .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .has-set-alert.is-alert-dialog {
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .has-set-alert.is-alert-dialog .dash-item-action-alert, .dash-item .has-set-alert.is-alert-dialog .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-dialog:hover .dash-item-action-alert, .dash-item .has-set-alert.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-highlighted .dash-item-action-alert, .dash-item .has-set-alert.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .has-set-alert.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-
-.dash-item:hover .is-alert-dialog .dash-item-action-alert {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-dialog .dash-item-action-alert {
-  color: transparent;
-  background-color: transparent;
-}
-.dash-item .is-alert-dialog .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-dialog.is-alert-dialog {
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-dialog.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-
-.dash-item:hover .is-alert-highlighted .dash-item-action-alert {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted .dash-item-action-alert {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted.is-alert-dialog {
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item .is-alert-highlighted.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-
-.dash-item:hover .is-alert-triggered .dash-item-action-alert {
-  color: var(--gd-palette-warning-dimmed40, #8a6434);
-  background-color: var(--gd-palette-warning-base-t50, rgba(241, 134, 0, 0.5));
-}
-.dash-item .is-alert-triggered .dash-item-action-alert {
-  color: var(--gd-palette-warning-dimmed40, #8a6434);
-  background-color: var(--gd-palette-warning-base-t50, rgba(241, 134, 0, 0.5));
-}
-.dash-item .is-alert-triggered .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-warning-text-dimmed, #685945);
-  background-color: var(--gd-palette-warning-base, #f18600);
-}
-.dash-item .is-alert-triggered.is-alert-dialog {
-  border-color: var(--gd-palette-warning-base, #f18600);
-}
-.dash-item .is-alert-triggered.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-warning-text-dimmed, #685945);
-  background-color: var(--gd-palette-warning-base, #f18600);
-}
-
-.dash-item:hover .is-alert-broken .dash-item-action-alert {
-  color: var(--gd-palette-error-base, #e54d42);
-  background-color: var(--gd-palette-error-dimmed, #fcedec);
-}
-.dash-item .is-alert-broken .dash-item-action-alert {
-  color: var(--gd-palette-error-base, #e54d42);
-  background-color: transparent;
-}
-.dash-item .is-alert-broken .dash-item-action-alert:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-error-base, #e54d42);
-}
-.dash-item .is-alert-broken.is-alert-dialog {
-  border-color: var(--gd-palette-error-base, #e54d42);
-}
-.dash-item .is-alert-broken.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-highlighted:hover .dash-item-action-alert:hover {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-error-base, #e54d42);
-}
-
-.dash-item .is-alert-evaluating .dash-item-action-alert {
-  color: var(--gd-palette-complementary-5, #b0beca);
-  background-color: var(--gd-palette-complementary-0, #fff);
-}
 .gd-dashboards-root {
   background: var(--gd-dashboards-content-backgroundColor, var(--gd-palette-complementary-0, #fff));
   font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
@@ -2873,19 +2787,6 @@
 .dash-item:hover a.kpi-link .kpi-value.is-empty-value {
   color: var(--gd-dashboards-content-kpiWidget-kpi-secondaryInfoColor-from-theme, var(--gd-palette-complementary-6-from-theme, inherit));
 }
-.dash-item .is-alert-highlighted::before, .dash-item .is-alert-highlighted:hover::before {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
-  animation-name: alert-highlighted;
-  animation-duration: 0.3s;
-  animation-iteration-count: 1;
-}
-.dash-item .is-alert-highlighted.is-alert-triggered::before, .dash-item .is-alert-highlighted.is-alert-triggered:hover::before, .dash-item .is-alert-highlighted.is-alert-broken::before, .dash-item .is-alert-highlighted.is-alert-broken:hover::before {
-  background-color: var(--gd-palette-warning-dimmed, #fce7cc);
-}
 .dash-item .is-selectable {
   cursor: pointer;
 }
@@ -2901,39 +2802,7 @@
 .dash-item.gd-highlighted > .dash-item-content-wrapper > .dash-item-content {
   border-color: var(--gd-palette-primary-base, #14b2e2);
 }
-.dash-item.is-selected .dash-item-action-lw-options {
-  display: block;
-  background-color: var(--gd-palette-complementary-7-from-theme, #b4c0cf);
-}
-.dash-item.is-selected .dash-item-action-lw-options::before {
-  color: var(--gd-palette-complementary-0, #fff);
-}
-.dash-item:focus-visible .dash-item-action-options {
-  display: block;
-}
-.dash-item:focus-visible .dash-item-action-options.dash-item-action-as-table {
-  display: flex;
-}
-.dash-item:focus-visible .dash-item-action-description .dash-item-action-description-trigger {
-  display: flex;
-}
 
-@keyframes alert-highlighted {
-  0% {
-    top: 50%;
-    right: 50%;
-    bottom: 50%;
-    left: 50%;
-    opacity: 0;
-  }
-  100% {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 1;
-  }
-}
 .dash-item-content-wrapper,
 .dash-item-content {
   display: flex;
@@ -2991,9 +2860,7 @@
   background-color: transparent;
 }
 
-.type-kpi .dash-item-action-alert,
 .type-kpi .dash-item-action-placeholder,
-.viz-type-headline .dash-item-action-alert,
 .viz-type-headline .dash-item-action-placeholder {
   top: calc(-10px - var(--gd-dashboards-content-kpiWidget-borderWidth, var(--gd-dashboards-content-widget-borderWidth, 2px)));
   right: calc(-10px - var(--gd-dashboards-content-kpiWidget-borderWidth, var(--gd-dashboards-content-widget-borderWidth, 2px)));
@@ -3096,7 +2963,6 @@
   justify-content: center;
   gap: 10px;
 }
-.gd-absolute-row .dash-item-action,
 .gd-absolute-row .dash-item-action-placeholder {
   position: relative;
   top: auto;
@@ -3106,245 +2972,58 @@
   display: none;
 }
 
-.dash-item-action {
-  position: absolute;
-  z-index: 2;
-  top: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
-  right: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  color: var(--gd-palette-complementary-0, #fff);
-  cursor: pointer;
-  border-radius: 20px;
-  font-size: 18px;
-  text-align: center;
-}
-.dash-item-action.disabled {
-  cursor: auto;
-}
-
-.dash-item-action-as-table {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.dash-item-action-as-table:hover path {
-  fill: var(--gd-palette-complementary-0, #fff);
-}
-
-.is-desktop .dash-item-action-alert:not(.disabled):hover,
-.is-desktop .dash-item-action-options:not(.disabled):hover,
-.is-desktop .dash-item-action-widget-options-active {
-  color: var(--gd-palette-complementary-0, #fff);
-  background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
-}
-
-.is-mobile .dash-item-action-alert:not(.disabled),
-.is-mobile .dash-item-action-options:not(.disabled) {
-  color: var(--gd-palette-complementary-7, #6d7680);
-  background: none;
-}
-.is-mobile .dash-item-action-alert.disabled,
-.is-mobile .dash-item-action-options.disabled {
-  background-color: transparent;
-}
-.is-mobile .dash-item-action-widget-options:not(.disabled) {
-  color: var(--gd-palette-complementary-7, #6d7680);
-  background-color: var(--gd-palette-complementary-2, #ebeff4);
-}
-.is-mobile .dash-item-action-widget-options-active:not(.disabled) {
-  background-color: var(--gd-palette-complementary-5, #b0beca);
-}
-
-.dash-item-action.dash-item-action-alert,
-.dash-item-action.dash-item-action-options {
-  display: none;
-  color: var(--gd-palette-complementary-7, #6d7680);
-  background-color: var(--gd-palette-complementary-2, #ebeff4);
-  transition: 0.2s;
-}
-.is-mobile .dash-item-action.dash-item-action-alert,
-.is-mobile .dash-item-action.dash-item-action-options {
-  display: block;
-}
-.dash-item-action.dash-item-action-alert:hover:not(.disabled),
-.dash-item-action.dash-item-action-options:hover:not(.disabled) {
-  color: var(--gd-palette-complementary-0-from-theme, inherit);
-  background-color: var(--gd-palette-complementary-7-from-theme, inherit);
-}
-
-.dash-item-action.dash-item-action-alert.disabled {
-  background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/alert-bell-na.svg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px;
-}
-.has-set-alert .dash-item-action.dash-item-action-alert, .is-alert-dialog .dash-item-action.dash-item-action-alert, .dash-item-content:hover .dash-item-action.dash-item-action-alert {
-  display: block;
-}
-
-.dash-item-action,
 .dash-item-action-placeholder {
   position: absolute;
   z-index: 2;
   top: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
   right: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
-}
-
-.dash-item-action-placeholder {
   width: 36px;
   height: 36px;
 }
-.dash-item-action-placeholder:focus-visible .dash-item-action-options {
-  display: block;
-}
-.dash-item-action-placeholder:focus-visible .dash-item-action-options.dash-item-action-as-table {
-  display: flex;
-}
-
-.dash-item-action-placeholder-headline {
-  right: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px) + 36px + 5px);
-}
 
-.dash-item-action-description .dash-item-action-description-trigger:not(.is-mobile) {
+.dash-item-action-button {
   display: none;
-}
-.dash-item-action-description:focus-visible .dash-item-action-description-trigger {
-  display: flex;
-}
-
-.dash-item-action-description-trigger {
-  display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
   width: 36px;
   height: 36px;
+  border-radius: 50%;
+  color: var(--gd-palette-complementary-7, #6d7680);
   background-color: var(--gd-palette-complementary-2, #ebeff4);
   cursor: pointer;
   transition: 0.2s;
-  font-size: 18px;
-  line-height: 18px;
-}
-.dash-item-action-description-trigger .gd-icon-circle-question {
-  margin-top: 2px;
-  color: var(--gd-palette-complementary-7, #6d7680);
-}
-.dash-item-action-description-trigger:hover {
-  background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
-}
-.dash-item-action-description-trigger:hover .gd-icon-circle-question {
-  color: var(--gd-palette-complementary-0, #fff);
 }
 
-.dash-item-action-description-active .dash-item-action-description-trigger {
-  background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
-}
-.dash-item-action-description-active .dash-item-action-description-trigger .gd-icon-circle-question {
-  color: var(--gd-palette-complementary-0, #fff);
-}
-
-.type-kpi .dash-item-action-description {
-  position: absolute;
-}
-
-.dash-item-content:hover .dash-item-action-description-trigger:not(.is-mobile),
-.dash-item-action-description-active .dash-item-action-description-trigger:not(.is-mobile) {
+.dash-item-content:hover .dash-item-action-button,
+.dash-item:focus-visible .dash-item-action-button,
+.dash-item-action-placeholder:focus-visible .dash-item-action-button,
+.dash-item-action-button--active {
   display: flex;
 }
 
-.dash-item-action,
-.dash-item-action-options {
-  width: 36px;
-  height: 36px;
-  border-radius: 20px;
-  font-size: 18px;
-  line-height: 36px;
-  text-align: center;
-  color: var(--gd-palette-complementary-0, #fff);
-  cursor: pointer;
-}
-.dash-item-action.disabled,
-.dash-item-action-options.disabled {
-  cursor: auto;
-}
-
-.dash-item-action-delete {
-  z-index: 2;
-  top: 0;
-  right: 0;
-  padding-top: 1px;
-  background-color: var(--gd-palette-primary-base, #14b2e2);
-}
-.dash-item-action-delete.gd-icon-trash::before {
-  content: url("@gooddata/sdk-ui-dashboard/esm/assets/trash.svg");
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
-.dash-item-action-delete::before {
-  z-index: 2;
-}
-.dash-item-action-delete:hover {
-  background-color: var(--gd-palette-error-base, #e54d42);
-}
-
-.dash-item-action-options {
-  display: none;
-  color: var(--gd-palette-complementary-7, #6d7680);
-  background-color: var(--gd-palette-complementary-2, #ebeff4);
-  transition: 0.2s;
-}
-.is-mobile .dash-item-action-options {
-  display: block;
-}
-
-.dash-item-content:not(.is-alert-dialog):hover .dash-item-action-options {
-  display: block;
-}
-
-.dash-item-content:not(.is-alert-dialog):hover .dash-item-action-options.dash-item-action-as-table {
-  display: flex;
+@media only screen and (max-width: 640px), (hover: none) {
+  .dash-item-action-button {
+    display: flex;
+  }
 }
-
-.dash-item-action-options-active,
-.dash-item-action-widget-options-active {
-  display: block;
+.dash-item-action-button:hover,
+.dash-item-action-button--active {
+  color: var(--gd-palette-complementary-0, #fff);
+  background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
 }
 
 .dash-item-action-widget-options::before {
   content: "...";
-  align-self: center;
   position: relative;
   top: -5px;
-  color: var(--gd-palette-complementary-7, #6d7680);
   font-size: 22px;
 }
-.dash-item-action-widget-options:hover, .dash-item-action-widget-options.dash-item-action-widget-options-active {
-  background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
-}
-.dash-item-action-widget-options:hover::before, .dash-item-action-widget-options.dash-item-action-widget-options-active::before {
-  color: var(--gd-palette-complementary-0, #fff);
-}
 
-.dash-item-action-lw-options {
-  top: 30px;
-  right: 30px;
-  display: none;
-  border-radius: 50%;
-  background-color: var(--gd-palette-complementary-2-from-theme, #eceff3);
-  width: 36px;
-  height: 36px;
-  transition: 0.2s;
+.dash-item-action-description-trigger {
+  font-size: 18px;
 }
-.dash-item-action-lw-options::before {
-  content: "...";
-  font-size: 22px;
-  position: relative;
-  top: -5px;
-  display: inline;
-  color: var(--gd-palette-complementary-7-from-theme, #b4c0cf);
+.dash-item-action-description-trigger .gd-icon-circle-question {
+  margin-top: 2px;
 }
 
 .dash-section {
@@ -3363,9 +3042,6 @@
 @media only screen and (max-width: 320px), only screen and (max-width: 640px) {
   .dash-section-kpis {
     margin: 0;
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-bottom: 5px;
   }
 }
 
@@ -3494,22 +3170,23 @@
   padding: 0;
   flex: unset;
   max-width: unset;
+  /**
+   * View mode now uses grid gap. Keep spacing with padding in edit mode only, where using grid gap is problematic.
+   * Use :where selector to not mess up with specificity.
+   */
 }
 .gd-grid-layout .dash-item .is-dragging-widget.dash-item-content {
   border-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
+:where(.sdk-edit-mode-on) .gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
   padding: 10px 0 0 0;
 }
-.gd-grid-layout .dash-item:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(.drag-info-placeholder) {
+:where(.sdk-edit-mode-on) .gd-grid-layout .dash-item:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(.drag-info-placeholder) {
   padding: 10px 0;
 }
-.gd-grid-layout .dash-item.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
+:where(.sdk-edit-mode-on) .gd-grid-layout .dash-item.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
   padding: 0 0 10px 0;
 }
-.gd-grid-layout .gd-empty-nested-layout {
-  padding: 10px 0;
-}
 .gd-grid-layout .gd-fluidlayout-column-container {
   display: flex;
 }
@@ -3532,6 +3209,32 @@
   font-size: 12px;
   font-weight: 800;
 }
+.gd-dash-content--density-compact .gd-absolute-row {
+  gap: 5px;
+  top: 10px;
+  right: 15px;
+  height: 24px;
+}
+.gd-dash-content--density-compact .gd-absolute-row .dash-item-action-placeholder {
+  top: auto;
+  right: auto;
+}
+.gd-dash-content--density-compact .dash-item-action-placeholder {
+  top: 10px;
+  right: 15px;
+  width: 24px;
+  height: 24px;
+}
+.gd-dash-content--density-compact .dash-item-action-button {
+  width: 24px;
+  height: 24px;
+}
+.gd-dash-content--density-compact .dash-item-action-widget-options::before {
+  font-size: 14px;
+}
+.gd-dash-content--density-compact .dash-item-action-description-trigger {
+  font-size: 12px;
+}
 .gd-dash-content--density-compact .gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
   padding: 0;
 }
@@ -3541,8 +3244,5 @@
 .gd-dash-content--density-compact .gd-grid-layout .dash-item.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
   padding: 0;
 }
-.gd-dash-content--density-compact .gd-grid-layout .gd-empty-nested-layout {
-  padding: 0;
-}
 
 /*# sourceMappingURL=dashboard.css.map */