@gooddata/sdk-ui-ext 10.18.0-alpha.8 → 10.18.0-beta.0

package/src/notificationsPanel/NotificationsPanel/{DefaultOpenNotificationsPanelButton.scss → DefaultNotificationsPanelButton.scss}

@@ -1,6 +1,6 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 
-.gd-ui-ext-open-notifications-button {
+.gd-ui-ext-notifications-panel-button {
     color: inherit;
     padding: 0 10px;
     display: flex;

package/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanelHeader.scss

@@ -1,4 +1,4 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 
 .gd-ui-ext-notifications-panel-header {
     display: flex;
@@ -7,12 +7,13 @@
     justify-content: space-between;
     padding-left: 15px;
     padding-right: 15px;
+    box-sizing: border-box;
 
     width: 100%;
 
     &__tabs {
         width: 100%;
-        height: 28px;
+        height: 23px;
 
         display: flex;
         flex-direction: column;
@@ -21,8 +22,12 @@
     }
 
     &__mark-all-as-read-button {
-        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 23px;
         white-space: nowrap;
         border-bottom: 1px solid var(--gd-palette-complementary-3);
+        box-sizing: border-box;
     }
 }

package/src/notificationsPanel/notificationPanel.scss

@@ -1,12 +1,16 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
+@use "@gooddata/sdk-ui-kit/styles/scss/overlay.scss";
+@use "@gooddata/sdk-ui-kit/styles/scss/tabs.scss";
+@use "@gooddata/sdk-ui-kit/src/@ui/UiIcon/UiIcon.scss";
+@use "@gooddata/sdk-ui-kit/src/@ui/UiButton/UiButton.scss";
+@use "@gooddata/sdk-ui-kit/src/@ui/UiSkeleton/UiSkeleton.scss";
+@use "@gooddata/sdk-ui-kit/src/@ui/UiPagedVirtualList/UiPagedVirtualList.scss";
 
 @use "./components/DetailsDialog.scss";
-@use "./components/Skeleton.scss";
-@use "./components/VirtualList.scss";
 // Panel
 @use "./NotificationsPanel/DefaultNotificationsPanel.scss";
 @use "./NotificationsPanel/DefaultNotificationsPanelHeader.scss";
-@use "./NotificationsPanel/DefaultOpenNotificationsPanelButton.scss";
+@use "./NotificationsPanel/DefaultNotificationsPanelButton.scss";
 // List
 @use "./NotificationsList/DefaultNotificationsList.scss";
 @use "./NotificationsList/DefaultNotificationsListEmptyState.scss";

package/styles/css/main.css

@@ -731,50 +731,385 @@
   background: var(--gd-palette-complementary-0, #fff);
 }
 
-.gd-ui-ext-notification-details-dialog {
-  width: 245px;
-  box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+/* allow vendor prefixes and disable max length */
+/* allow vendor prefixes and disable max length */
+.gd-dropdown.overlay {
+  padding: 0;
+}
+
+.overlay-wrapper {
+  z-index: 5001;
+}
+
+.overlay {
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-weight: 400;
+  line-height: 1.4rem;
+  color: var(--gd-palette-complementary-8, #464e56);
+  font-size: 14px;
+  position: relative;
+  padding: 0.1px;
   border-radius: 3px;
-  border: 1px solid var(--gd-palette-complementary-3);
-  background-color: var(--gd-palette-complementary-0);
-  font-family: var(--gd-font-family);
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  background-color: var(--gd-palette-complementary-0, #fff);
+  box-shadow: 0 1px 20px var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.2));
 }
-.gd-ui-ext-notification-details-dialog__header {
+@media only screen and (max-width: 640px) {
+  .overlay {
+    border-radius: 0;
+  }
+}
+
+.gd-overlay-content {
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  line-height: 1.5;
+}
+.gd-overlay-content button,
+.gd-overlay-content input,
+.gd-overlay-content optgroup,
+.gd-overlay-content select,
+.gd-overlay-content textarea {
+  outline: 0;
+}
+.gd-overlay-content *,
+.gd-overlay-content *::before,
+.gd-overlay-content *::after {
+  box-sizing: border-box;
+}
+.gd-overlay-content .invisible {
+  visibility: hidden;
+}
+
+.gd-error-overlay-content .modalityPlugin-mask-visible {
+  z-index: 10001;
+  opacity: 0.95;
+}
+
+.gd-error-overlay {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  background: var(--gd-palette-complementary-2);
-  height: 35px;
+  text-align: center;
 }
-.gd-ui-ext-notification-details-dialog__header-title {
-  color: var(--gd-palette-complementary-6);
-  font-size: 11px;
-  font-style: normal;
+.gd-error-overlay .gd-error-overlay-icon {
+  margin-bottom: 20px;
+}
+.gd-error-overlay h2 {
+  margin-bottom: 10px;
+}
+.gd-error-overlay .gd-error-overlay-text {
+  line-height: 23px;
+  color: var(--gd-palette-complementary-8, #464e56);
+  font-size: 14px;
+}
+.gd-error-overlay .gd-error-overlay-button {
+  margin-top: 20px;
+}
+
+.gd-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+}
+.gd-tabs.small .gd-tab {
+  padding: 3px 6px;
+  line-height: 14px;
+  margin-right: 14px;
+  font-size: 12px;
+}
+
+.gd-tab {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: flex-end;
+  margin: 0 20px -1px 0;
+  padding: 3px 0;
+  font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--gd-palette-complementary-7, #6d7680);
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  font-size: 14px;
+  text-align: center;
+}
+.gd-tab:hover {
+  color: var(--gd-palette-complementary-8-from-theme, var(--gd-palette-complementary-9, #000));
+  border-bottom: 3px solid var(--gd-palette-complementary-3, #dde4eb);
+}
+.gd-tab.is-active {
+  color: var(--gd-palette-complementary-9, #000);
+  border-bottom: 3px solid var(--gd-palette-primary-base, #14b2e2);
   font-weight: 700;
-  line-height: normal;
-  text-transform: uppercase;
 }
-.gd-ui-ext-notification-details-dialog__header-close-button {
+.gd-tab:hover, .gd-tab.is-active {
+  text-decoration: none;
+}
+.gd-tab span {
+  overflow: hidden;
+}
+
+.gd-ui-kit-icon--color-primary {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-icon--color-warning {
+  --gd-icon-fill-color: var(--gd-palette-warning-base);
+}
+.gd-ui-kit-icon--color-error {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-icon--color-complementary-0 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-icon--color-complementary-1 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-1);
+}
+.gd-ui-kit-icon--color-complementary-2 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-icon--color-complementary-3 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-3);
+}
+.gd-ui-kit-icon--color-complementary-4 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-icon--color-complementary-5 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-icon--color-complementary-6 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-icon--color-complementary-7 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-icon--color-complementary-8 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-icon--color-complementary-9 {
+  --gd-icon-fill-color: var(--gd-palette-complementary-9);
+}
+.gd-ui-kit-icon__fill {
+  transition: var(--gd-transition-all);
+  fill: var(--gd-icon-fill-color);
+}
+
+.gd-ui-kit-button {
+  font-family: var(--gd-font-family);
+  gap: var(--gd-spacing-5px);
+  border-radius: var(--gd-button-borderRadius);
+  transition: var(--gd-transition-all);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
+  border-style: solid;
+  border-width: 1px;
+  /**
+   * Size
+   */
+  /**
+   * Variant
+   */
+}
+.gd-ui-kit-button:disabled {
+  cursor: default;
 }
-.gd-ui-ext-notification-details-dialog__header-close-button:hover {
-  opacity: 0.7;
+.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout):active .gd-ui-kit-button__text {
+  padding-top: 1px;
 }
-.gd-ui-ext-notification-details-dialog__content {
-  padding: 10px;
+.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout):active .gd-ui-kit-button__icon {
+  padding-top: 1px;
 }
-.gd-ui-ext-notification-details-dialog__footer {
-  border-top: 1px solid var(--gd-palette-complementary-3);
-  padding: 10px;
+.gd-ui-kit-button__text {
+  transition: var(--gd-transition-all);
+}
+.gd-ui-kit-button__icon {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: center;
+  transition: var(--gd-transition-all);
+}
+.gd-ui-kit-button--isLoading .gd-ui-kit-button__icon {
+  animation: rotate 1s infinite steps(30);
+}
+.gd-ui-kit-button--size-small {
+  height: var(--gd-button-S);
+  padding: var(--gd-spacing-6px) var(--gd-spacing-10px);
+  font-size: 12px;
+  line-height: 14px;
+}
+.gd-ui-kit-button--size-small.gd-ui-kit-button--iconPosition-left {
+  padding-left: var(--gd-spacing-7px);
+}
+.gd-ui-kit-button--size-small.gd-ui-kit-button--iconPosition-right {
+  padding-right: var(--gd-spacing-7px);
+}
+.gd-ui-kit-button--size-medium {
+  height: var(--gd-button-M);
+  padding: var(--gd-spacing-6px) var(--gd-spacing-15px);
+  font-size: 14px;
+  line-height: 16px;
+}
+.gd-ui-kit-button--size-medium.gd-ui-kit-button--iconPosition-left {
+  padding-left: var(--gd-spacing-10px);
+}
+.gd-ui-kit-button--size-medium.gd-ui-kit-button--iconPosition-right {
+  padding-right: var(--gd-spacing-10px);
+}
+.gd-ui-kit-button--size-large {
+  height: var(--gd-button-L);
+  padding: var(--gd-spacing-6px) var(--gd-spacing-20px);
+  font-size: 16px;
+  line-height: 18px;
+}
+.gd-ui-kit-button--size-large.gd-ui-kit-button--iconPosition-left {
+  padding-left: var(--gd-spacing-15px);
+}
+.gd-ui-kit-button--size-large.gd-ui-kit-button--iconPosition-right {
+  padding-right: var(--gd-spacing-15px);
+}
+.gd-ui-kit-button--variant-primary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-primary-base);
+  border-color: var(--gd-palette-complementary-9-t90);
+  font-weight: 700;
+}
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):focus {
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):hover {
+  background-color: var(--gd-palette-primary-base-d06);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-primary:not(.gd-ui-kit-button--variant-primary:disabled):active {
+  background: var(--gd-palette-primary-base-d12);
+  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-primary:disabled {
+  background-color: var(--gd-palette-primary-disabled);
+  box-shadow: none;
+  border-color: transparent;
+}
+.gd-ui-kit-button--variant-secondary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+  color: var(--gd-palette-complementary-7);
+  border-color: var(--gd-palette-complementary-4);
+  background-color: var(--gd-palette-complementary-0);
+  font-weight: 400;
+}
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):focus {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+  background: var(--gd-palette-complementary-1);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40) inset;
+}
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+  border-color: var(--gd-palette-complementary-5);
+  background: var(--gd-palette-complementary-0);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-5-t40) inset;
+}
+.gd-ui-kit-button--variant-secondary:not(.gd-ui-kit-button--variant-secondary:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+  border-color: var(--gd-palette-complementary-5);
+  background: var(--gd-palette-complementary-3);
+  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-secondary:disabled {
+  color: var(--gd-palette-complementary-5);
+  border-color: var(--gd-palette-complementary-4);
+  background: var(--gd-palette-complementary-0);
+  box-shadow: none;
+}
+.gd-ui-kit-button--variant-tertiary {
+  --gd-icon-fill-color: var(--gd-palette-complementary-5);
+  color: var(--gd-palette-complementary-7);
+  text-decoration: underline;
+  background-color: transparent;
+  border-color: transparent;
+}
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-button--variant-tertiary:disabled {
+  color: var(--gd-palette-complementary-5);
+  text-decoration: none;
+}
+.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-small, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-medium, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-large {
+  padding: 0;
+  height: auto;
+}
+.gd-ui-kit-button--variant-popout {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-primary-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):focus {
+  text-decoration: underline;
+}
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):hover {
+  color: var(--gd-palette-complementary-8);
+  text-decoration: underline;
+}
+.gd-ui-kit-button--variant-popout:not(.gd-ui-kit-button--variant-popout:disabled):active {
+  color: var(--gd-palette-primary-base);
+  text-decoration: underline;
+}
+.gd-ui-kit-button--variant-popout:disabled {
+  color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-small, .gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-medium, .gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-large {
+  padding: 0;
+  height: auto;
+}
+.gd-ui-kit-button--variant-danger {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  background: var(--gd-palette-error-base);
+  color: var(--gd-palette-complementary-0);
+  border-color: var(--gd-palette-complementary-9-t90);
+  font-weight: 700;
+}
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):focus {
+  border-color: var(--gd-palette-complementary-9-t80);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):hover {
+  border-color: var(--gd-palette-complementary-9-t80);
+  background-color: var(--gd-palette-error-base-d10);
+  box-shadow: var(--gd-button-dropShadow, 0 -2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-danger:not(.gd-ui-kit-button--variant-danger:disabled):active {
+  border-color: var(--gd-palette-complementary-9-t80);
+  background: var(--gd-palette-error-base-d20);
+  box-shadow: var(--gd-button-dropShadow, 0 2px 0 0) var(--gd-palette-complementary-9-t85) inset;
+}
+.gd-ui-kit-button--variant-danger:disabled {
+  background-color: var(--gd-palette-error-disabled);
+  box-shadow: none;
+  border-color: transparent;
 }
 
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes react-loading-skeleton {
   100% {
     transform: translateX(100%);
@@ -819,54 +1154,130 @@
     --pseudo-element-display: none; /* Disable animation */
   }
 }
-.gd-ui-ext-skeleton {
+.gd-ui-kit-skeleton {
   height: 100%;
   width: 100%;
   display: flex;
+}
+.gd-ui-kit-skeleton--direction-column {
   flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.gd-ui-kit-skeleton--direction-row {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
 }
-.gd-ui-ext-skeleton__item {
+.gd-ui-kit-skeleton__item {
   border-radius: 3px;
+  width: 100%;
+  height: 100%;
 }
-.gd-ui-ext-skeleton .react-loading-skeleton {
+.gd-ui-kit-skeleton .react-loading-skeleton {
   --base-color: var(--gd-palette-complementary-2);
   --highlight-color: var(--gd-palette-complementary-0);
 }
-.gd-ui-ext-skeleton span {
+.gd-ui-kit-skeleton span {
   line-height: 0;
   font-size: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
-.gd-ui-ext-virtual-list {
+.gd-ui-kit-paged-virtual-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
   height: 100%;
   width: 100%;
 }
-.gd-ui-ext-virtual-list--hasScroll {
+.gd-ui-kit-paged-virtual-list--hasScroll {
   padding-right: 4px;
 }
-.gd-ui-ext-virtual-list__scroll-container {
+.gd-ui-kit-paged-virtual-list__scroll-container {
+  min-height: 0;
+  max-height: 100%;
   overflow: auto;
   overflow-x: hidden;
 }
-.gd-ui-ext-virtual-list__scroll-container::-webkit-scrollbar {
+.gd-ui-kit-paged-virtual-list__scroll-container::-webkit-scrollbar {
   -webkit-appearance: none;
   appearance: none;
   width: 6px;
 }
-.gd-ui-ext-virtual-list__scroll-container::-webkit-scrollbar-thumb {
+.gd-ui-kit-paged-virtual-list__scroll-container::-webkit-scrollbar-thumb {
   background-color: var(--gd-palette-complementary-2);
   border-radius: 3px;
 }
+.gd-ui-kit-paged-virtual-list__item {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.gd-ui-kit-paged-virtual-list__gap {
+  width: 100%;
+}
+
+.gd-ui-ext-notification-details-dialog {
+  width: 245px;
+  box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
+  border-radius: 3px;
+  border: 1px solid var(--gd-palette-complementary-3);
+  background-color: var(--gd-palette-complementary-0);
+  font-family: var(--gd-font-family);
+}
+.gd-ui-ext-notification-details-dialog__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background: var(--gd-palette-complementary-2);
+  height: 35px;
+}
+.gd-ui-ext-notification-details-dialog__header-title {
+  color: var(--gd-palette-complementary-6);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-transform: uppercase;
+}
+.gd-ui-ext-notification-details-dialog__header-close-button {
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.gd-ui-ext-notification-details-dialog__header-close-button:hover {
+  opacity: 0.7;
+}
+.gd-ui-ext-notification-details-dialog__content {
+  padding: 10px;
+}
+.gd-ui-ext-notification-details-dialog__footer {
+  border-top: 1px solid var(--gd-palette-complementary-3);
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
 
 .gd-ui-ext-notifications-panel {
   font-family: var(--gd-font-family);
+  font-size: 12px;
+  line-height: 14px;
   background-color: var(--gd-palette-complementary-0);
   box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
   display: flex;
   flex-direction: column;
-  padding-top: 15px;
-  width: 370px;
-  max-height: 560px;
+  padding-top: 10px;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -877,40 +1288,45 @@
   justify-content: space-between;
   padding-left: 15px;
   padding-right: 15px;
+  box-sizing: border-box;
   width: 100%;
 }
 .gd-ui-ext-notifications-panel-header__tabs {
   width: 100%;
-  height: 28px;
+  height: 23px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-end;
 }
 .gd-ui-ext-notifications-panel-header__mark-all-as-read-button {
-  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 23px;
   white-space: nowrap;
   border-bottom: 1px solid var(--gd-palette-complementary-3);
+  box-sizing: border-box;
 }
 
-.gd-ui-ext-open-notifications-button {
+.gd-ui-ext-notifications-panel-button {
   color: inherit;
   padding: 0 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.gd-ui-ext-open-notifications-button:hover, .gd-ui-ext-open-notifications-button--isOpen {
+.gd-ui-ext-notifications-panel-button:hover, .gd-ui-ext-notifications-panel-button--isOpen {
   background: rgba(255, 255, 255, 0.3);
 }
-.gd-ui-ext-open-notifications-button__icon {
+.gd-ui-ext-notifications-panel-button__icon {
   opacity: 0.8;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-.gd-ui-ext-open-notifications-button__unread-status {
+.gd-ui-ext-notifications-panel-button__unread-status {
   width: 7px;
   height: 7px;
   border-radius: 51%;
@@ -926,6 +1342,9 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+  height: 100%;
 }
 
 .gd-ui-ext-notifications-list-empty-state {