From 5a33c77c3ab8e1bce91cf45bfea928b9984b31e2 Mon Sep 17 00:00:00 2001
From: Karina Kwiatek <kjk@kjk.dog>
Date: Wed, 20 Jul 2022 16:50:27 +0200
Subject: [PATCH] Prevent notification content from overflowing outside the
 container

---
 .../styles/components/_mobile-nav.scss        | 42 ++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/javascript/styles/components/_mobile-nav.scss b/app/javascript/styles/components/_mobile-nav.scss
index a1b1f549..af0b0053 100644
--- a/app/javascript/styles/components/_mobile-nav.scss
+++ b/app/javascript/styles/components/_mobile-nav.scss
@@ -27,21 +27,33 @@
   }
 }
 
-#rs-mobile-nav-notifications,
-#rs-mobile-nav-profile {
-  bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})");
-  position: fixed;
-  top: unset;
-}
+@include media-breakpoint-down("md") {
+  .notification-dropdown,
+  .profile-dropdown {
+    bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})");
+    position: fixed;
+    top: unset;
+  }
 
-#rs-mobile-nav-profile {
-  left: unset;
-  right: unquote("calc(env(safe-area-inset-right) + 15px)");
-}
+  .profile-dropdown {
+    left: unset;
+    right: unquote("calc(env(safe-area-inset-right) + 15px)");
+  }
 
-#rs-mobile-nav-notifications {
-  left: unquote("calc(env(safe-area-inset-left) + 8px)");
-  right: unquote("calc(env(safe-area-inset-right) + 8px)");
-  max-width: unquote("calc(100vw - (8px + env(safe-area-inset-right)) - (8px + env(safe-area-inset-left)))");
-  min-width: unset;
+  .notification-dropdown {
+    left: unquote("calc(env(safe-area-inset-left) + 8px)");
+    width: unquote("calc(100vw - (8px + env(safe-area-inset-right)) - (8px + env(safe-area-inset-left)))");
+    max-width: unquote("calc(100vw - (8px + env(safe-area-inset-right)) - (8px + env(safe-area-inset-left)))");
+    min-width: unset !important;
+    right: unquote("calc(env(safe-area-inset-right) + 8px)");
+
+    .dropdown-item {
+      padding: 8px;
+
+      & > .notification {
+        padding: 0;
+        white-space: normal;
+      }
+    }
+  }
 }