diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index 6e2a0a71..b94d9b6c 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -98,7 +98,7 @@ export const CommentInNotification = (props: {
       <Avatar src={props.avatar} displayName={props.displayName} />
       <pre
         style={{ wordBreak: "break-word" }}
-        className={`whitespace-pre-wrap text-secondary line-clamp-6 ${props.className}`}
+        className={`whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6 ${props.className}`}
       >
         <BaseTextBlock
           preview
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index 56614c65..54357695 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -176,7 +176,7 @@ export function NotificationButton(props: { current?: boolean }) {
       asChild
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
-      className="max-w-sm pt-3! pb-3!"
+      className="sm:max-w-sm w-full pt-3! pb-3!"
       trigger={
         <ActionButton
           nav
@@ -189,7 +189,7 @@ export function NotificationButton(props: { current?: boolean }) {
             )
           }
           label="Notifications"
-          className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${props.unreads ? "text-accent-contrast" : ""}`}
+          className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`}
         />
       }
     >