From 5b236760b12ffe31e7778ce0d89be24a9f9eed02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kan=C4=9Bra?= <marti.kanera@gmail.com>
Date: Wed, 10 Feb 2021 17:27:30 +0100
Subject: [PATCH] feat(notifications-list): fixed height

---
 .../notifications-list/notifications-list.sass  | 17 ++++++++++++++++-
 .../notifications-list/notifications-list.vue   |  9 +++++----
 tailwind.config.js                              |  5 ++++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/components/notifications-list/notifications-list.sass b/components/notifications-list/notifications-list.sass
index 7e051e88..3f63de4d 100644
--- a/components/notifications-list/notifications-list.sass
+++ b/components/notifications-list/notifications-list.sass
@@ -2,6 +2,21 @@
   @apply flex flex-col items-center
 
   width: 300px
+  max-height: 325px
+
+  .wrapper
+    @apply p-2
+    overflow-y: overlay
+
+  .wrapper::-webkit-scrollbar, .wrapper::-webkit-scrollbar-thumb
+    width: 23px
+    border-radius: 13px
+    background-clip: padding-box
+    border: 10px solid transparent
+
+  .wrapper::-webkit-scrollbar-thumb
+    box-shadow: inset 0 0 0 10px
+
 
   .notification
     @apply py-2 px-3
@@ -9,7 +24,7 @@
     @apply flex items-center justify-between
 
     .action
-      @apply rounded-full text-ps-green cursor-pointer
+      @apply rounded-full text-ps-green cursor-pointer p-1
 
       transition: all 250ms ease-in-out
 
diff --git a/components/notifications-list/notifications-list.vue b/components/notifications-list/notifications-list.vue
index ef1aa3d1..05243044 100644
--- a/components/notifications-list/notifications-list.vue
+++ b/components/notifications-list/notifications-list.vue
@@ -1,9 +1,10 @@
 <template lang="pug">
 .notifications-list
-  .notification(v-for='(notification, i) in notifications', :key='i')
-    .message {{ notification.message }}
-    .action
-      close-icon(:size='18', @click='removeNotification(notification.id)')
+  .wrapper
+    .notification(v-for='(notification, i) in notifications', :key='i')
+      .message {{ notification.message }}
+      .action
+        close-icon(:size='18', @click='removeNotification(notification.id)')
 </template>
 
 <script lang="ts">
diff --git a/tailwind.config.js b/tailwind.config.js
index e7b7d79c..c7506d2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -73,7 +73,10 @@ module.exports = {
         },
       });
       addBase({
-        body: { backgroundColor: config('theme.colors.ps-primary'), overflowX: 'hidden' },
+        body: {
+          backgroundColor: config('theme.colors.ps-primary'),
+          overflowX: 'hidden',
+        },
         'button:focus': {
           outline: 'none',
           '-webkit-tap-highlight-color': 'transparent',