Fix dropdown overflow & add border to reactionpick

webkom · Feb 5, 2023 · 8ac1bfa · 8ac1bfa
1 parent 4dd1052
commit 8ac1bfa
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -276,7 +276,6 @@ class Header extends Component<Props, State> {
                   triggerComponent={
                     <ProfilePicture
                       size={24}
-                      alt="user"
                       user={currentUser}
                       style={{
                         verticalAlign: 'middle',

diff --git a/app/components/Reactions/ReactionPicker.css b/app/components/Reactions/ReactionPicker.css
@@ -1,6 +1,7 @@
 @import url('~app/styles/variables.css');
 
 .reactionPicker {
+  composes: popover from '~app/styles/utilities.css';
   height: 400px;
   width: 309px;
   line-height: 1.3;

diff --git a/app/styles/overlay.css b/app/styles/overlay.css
@@ -1,11 +1,9 @@
 @import url('~app/styles/variables.css');
 
 .content {
+  composes: popover from '~app/styles/utilities.css';
   background: var(--lego-card-color);
   border-radius: 1rem;
-  border: 1px solid var(--color-gray-3);
-  box-shadow: 0 2px 8px 2px rgba(104, 112, 118, 7%),
-    0 2px 4px -1px rgba(104, 112, 118, 4%);
   position: absolute;
   margin-top: 10px;
   z-index: 2;
@@ -45,6 +43,11 @@
   }
 }
 
+.dropdownList {
+  border-radius: inherit;
+  overflow: hidden;
+}
+
 .dropdownList > li > a,
 .dropdownList > li > button {
   width: 100%;

diff --git a/app/styles/utilities.css b/app/styles/utilities.css
@@ -12,6 +12,12 @@
   margin: 0 auto;
 }
 
+.popover {
+  border: 1px solid var(--border-gray);
+  box-shadow: 0 2px 8px 2px rgba(104, 112, 118, 7%),
+    0 2px 4px -1px rgba(104, 112, 118, 4%);
+}
+
 .contentContainer {
   composes: container;
   background: var(--color-white);