.alert
  padding 20px
  text-align center
  p
    color warning
  td
    text-align left

.notification
  background-color sprout
  padding 10px
  color #fff
  text-align center
  font-weight bold
  > .container
    display flex
    align-items center
    p
      flex 1
      margin-bottom 0
      white-space pre-line

    .button
      margin-left 20px

    a:not(.button)
      color #fff

.notice
  @extends .notification
  position relative
  z-index 9999
  width 100%
  text-align left
  background-color warning
  color #fff
  > .container
   svg
      &:focus,
      &:hover
        cursor pointer
        color smoke
        outline none

.alert
  padding 20px
  text-align center
  p
    color warning
  td
    text-align left

.notification
  background-color sprout
  padding 10px
  color #fff
  text-align center
  font-weight bold
  > .container
    display flex
    align-items center
    p
      flex 1
      margin-bottom 0
      white-space pre-line
      overflow overlay

    .button
      margin-left 20px

    a:not(.button)
      color #fff

.notice
  @extends .notification
  position relative
  z-index 9999
  width 100%
  text-align left
  background-color warning
  color #fff
  > .container
   svg
      &:focus,
      &:hover
        cursor pointer
        color smoke
        outline none

Fix bug where 'dismiss' icon isn't usable in error notification
Fix bug where 'dismiss' icon isn't usable in error notification

A user reported that, while using Article Finder, undismissable error notifications would gradually take over the screen. The errors were from ORES API request timeouts, but the URL that threw the error was so long that it pushed the 'dismiss' icon wasn't visible. Setting 'overflow: overlay' adds a horizontal scroll bar instead when there is a string that is too long but won't wrap within an error message, so the dismiss icon should remain usable.
