Fix dropdown overflow & add border to reactionpick

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

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/app/components/Image/ProfilePicture.tsx b/app/components/Image/ProfilePicture.tsx
@@ -11,8 +11,8 @@ type Props = Omit<
     size: number;
     className?: string;
   } & ComponentProps<typeof CircularPicture>,
-  'placeholder' | 'src' | 'alt'
->;
+  'placeholder' | 'src'
+> & { alt?: string };
 
 const ProfilePicture = ({
   user,

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);