More notification spacing tweaks

getfider · Oct 7, 2024 · 941fdb4 · 941fdb4
1 parent eedd58e
commit 941fdb4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/public/assets/styles/utility/display.scss b/public/assets/styles/utility/display.scss
@@ -149,7 +149,7 @@
     border: 0 solid get("colors.gray.100");
     border-top-width: 1px;
   }
-  .flex-y.flex--divide-#{$i}:not(.no-lastchild-paddingzero) > *:last-child {
+  .flex-y.flex--divide-#{$i} > *:last-child {
     padding-bottom: 0;
   }
 }
@@ -204,10 +204,8 @@
   pointer-events: inherit;
 }
 
-
 .hover {
   &:hover {
-    background-color: get("colors.gray.100")
+    background-color: get("colors.gray.100");
   }
 }
-
diff --git a/public/components/NotificationIndicator.scss b/public/components/NotificationIndicator.scss
@@ -17,4 +17,7 @@
 .c-notifications-container {
   max-height: 80vh;
   overflow-y: auto;
+  @include media("lg") {
+    min-width: 400px;
+  }
 }
diff --git a/public/components/NotificationIndicator.tsx b/public/components/NotificationIndicator.tsx
@@ -18,7 +18,7 @@ export const NotificationItem = ({ notification }: { notification: Notification
   }
 
   return (
-    <HStack spacing={4} className="px-3 pr-5 clickable hover py-2" onClick={openNotification}>
+    <HStack spacing={4} className="px-3 pr-5 clickable hover py-4" onClick={openNotification}>
       <Avatar user={{ name: notification.authorName, avatarURL: notification.avatarURL }} />
       <div>
         <Markdown className="c-notification-indicator-text" text={notification.title} style="full" />
@@ -93,7 +93,7 @@ export const NotificationIndicator = () => {
                 <p className="text-subtitle px-4 mt-2 mb-0">
                   <Trans id="modal.notifications.unread">Unread notifications</Trans>
                 </p>
-                <VStack spacing={2} className="py-3 mb-2 no-lastchild-paddingzero" divide={true}>
+                <VStack spacing={0} className="my-2" divide={false}>
                   {unread.map((n) => (
                     <NotificationItem key={n.id} notification={n} />
                   ))}
@@ -112,7 +112,7 @@ export const NotificationIndicator = () => {
                 <p className="text-subtitle px-4 mb-0">
                   <Trans id="modal.notifications.previous">Previous notifications</Trans>
                 </p>
-                <VStack spacing={2} className="py-2 no-lastchild-paddingzero" divide={true}>
+                <VStack spacing={0} className="my-2" divide={false}>
                   {recent.map((n) => (
                     <NotificationItem key={n.id} notification={n} />
                   ))}