<commit_before>@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './customize.less';

@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;

.@{notification-prefix-cls} {
  .reset-component;

  position: fixed;
  z-index: @zindex-notification;
  max-width: ~'calc(100vw - 32px)';
  margin-right: 24px;

  &-topLeft,
  &-bottomLeft {
    margin-right: 0;
    margin-left: 24px;

    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationLeftFadeIn;
    }
  }

  &-close-icon {
    font-size: @font-size-base;
    cursor: pointer;
  }

  &-hook-holder,
  &-notice {
    position: relative;
    width: @notification-width;
    margin-bottom: @notification-margin-bottom;
    margin-left: auto;
    overflow: hidden;
    background: @notification-bg;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;

    .@{notification-prefix-cls}-topLeft &,
    .@{notification-prefix-cls}-bottomLeft & {
      margin-right: auto;
      margin-left: 0;
    }<commit_msg>fix: notification width in small screen (#27189)<commit_after>@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './customize.less';

@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;
@notification-margin-edge: 24px;

.@{notification-prefix-cls} {
  .reset-component;

  position: fixed;
  z-index: @zindex-notification;
  margin-right: @notification-margin-edge;

  &-topLeft,
  &-bottomLeft {
    margin-right: 0;
    margin-left: @notification-margin-edge;

    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationLeftFadeIn;
    }
  }

  &-close-icon {
    font-size: @font-size-base;
    cursor: pointer;
  }

  &-hook-holder,
  &-notice {
    position: relative;
    width: @notification-width;
    max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
    margin-bottom: @notification-margin-bottom;
    margin-left: auto;
    overflow: hidden;
    background: @notification-bg;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;

    .@{notification-prefix-cls}-topLeft &,
    .@{notification-prefix-cls}-bottomLeft & {
      margin-right: auto;
      margin-left: 0;
    }
{'fraction_non_alphanumeric': 0.1705903658094893, 'fraction_numerical': 0.013038754074610649, 'mean_word_length': 3.5057096247960846, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4139294', 'n_tokens_mistral': 947, 'n_tokens_neox': 885, 'n_words': 139}