From 28f49525995a3b814a54d247daa5cdc2af7830b7 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Fri, 25 Oct 2024 09:49:35 -0400
Subject: [PATCH] fix(web): replace manual height hack in notifications
 infinite scroll

---
 web/components/Notifications/List.vue    |  2 +-
 web/components/Notifications/Sidebar.vue | 90 +++++++++++++-----------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/web/components/Notifications/List.vue b/web/components/Notifications/List.vue
index cd2ab6cc3..3ed46622d 100644
--- a/web/components/Notifications/List.vue
+++ b/web/components/Notifications/List.vue
@@ -62,7 +62,7 @@ async function onLoadMore() {
     <div
       v-if="notifications?.length > 0"
       v-infinite-scroll="onLoadMore"
-      class="divide-y divide-gray-200 overflow-y-scroll px-6 h-full"
+      class="divide-y divide-gray-200 overflow-y-auto pl-7 pr-4 h-full"
     >
       <NotificationsItem
         v-for="notification in notifications"
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 49b85cbb4..b6536a6dd 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -25,54 +25,58 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
       <BellIcon class="w-6 h-6" />
     </SheetTrigger>
 
-    <SheetContent
-      :to="teleportTarget"
-      class="w-full sm:max-w-[540px] space-y-3 h-screen"
-    >
-      <SheetHeader>
-        <SheetTitle>Notifications</SheetTitle>
-      </SheetHeader>
+    <SheetContent :to="teleportTarget" class="w-full sm:max-w-[540px] h-screen px-0">
+      <div class="flex flex-col h-full gap-3">
+        <SheetHeader class="ml-1 px-6">
+          <SheetTitle>Notifications</SheetTitle>
+        </SheetHeader>
 
-      <Tabs default-value="unread" class="h-full">
-        <div class="flex flex-row justify-between items-center flex-wrap gap-2">
-          <TabsList class="ml-[1px]">
-            <TabsTrigger value="unread"> Unread </TabsTrigger>
-            <TabsTrigger value="archived"> Archived </TabsTrigger>
-          </TabsList>
-
-          <Button
-            :disabled="loadingArchiveAll"
-            variant="link"
-            size="sm"
-            class="text-muted-foreground text-base p-0"
-            @click="archiveAll"
+        <Tabs default-value="unread" class="flex-1 flex flex-col min-h-0">
+          <div
+            class="flex flex-row justify-between items-center flex-wrap gap-2 px-6"
           >
-            {{ `Archive All` }}
-          </Button>
+            <TabsList class="ml-[1px]">
+              <TabsTrigger value="unread"> Unread </TabsTrigger>
+              <TabsTrigger value="archived"> Archived </TabsTrigger>
+            </TabsList>
 
-          <Select>
-            <SelectTrigger class="bg-secondary border-0 h-auto">
-              <SelectValue class="text-muted-foreground" placeholder="Filter" />
-            </SelectTrigger>
-            <SelectContent :to="teleportTarget">
-              <SelectGroup>
-                <SelectLabel>Notification Types</SelectLabel>
-                <SelectItem value="alert">Alert</SelectItem>
-                <SelectItem value="info">Info</SelectItem>
-                <SelectItem value="warning">Warning</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
+            <Button
+              :disabled="loadingArchiveAll"
+              variant="link"
+              size="sm"
+              class="text-muted-foreground text-base p-0"
+              @click="archiveAll"
+            >
+              {{ `Archive All` }}
+            </Button>
 
-        <TabsContent value="unread" class="h-[92%]">
-          <NotificationsList :type="NotificationType.Unread" />
-        </TabsContent>
+            <Select>
+              <SelectTrigger class="bg-secondary border-0 h-auto">
+                <SelectValue
+                  class="text-muted-foreground"
+                  placeholder="Filter"
+                />
+              </SelectTrigger>
+              <SelectContent :to="teleportTarget">
+                <SelectGroup>
+                  <SelectLabel>Notification Types</SelectLabel>
+                  <SelectItem value="alert">Alert</SelectItem>
+                  <SelectItem value="info">Info</SelectItem>
+                  <SelectItem value="warning">Warning</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
 
-        <TabsContent value="archived" class="h-[92%]">
-          <NotificationsList :type="NotificationType.Archive" />
-        </TabsContent>
-      </Tabs>
+          <TabsContent value="unread" class="flex-1 min-h-0 mt-3">
+            <NotificationsList :type="NotificationType.Unread" />
+          </TabsContent>
+
+          <TabsContent value="archived" class="flex-1 min-h-0 mt-3">
+            <NotificationsList :type="NotificationType.Archive" />
+          </TabsContent>
+        </Tabs>
+      </div>
     </SheetContent>
   </Sheet>
 </template>