minor css fixes: #5145

ui/component/notification/view.jsx

@@ -193,7 +193,7 @@ export default function Notification(props: Props) {
 
         <div className="notification__menu">
           <Menu>
-            <MenuButton onClick={(e) => e.stopPropagation()}>
+            <MenuButton className={'notification__menu-button'} onClick={(e) => e.stopPropagation()}>
               <Icon size={18} icon={ICONS.MORE_VERTICAL} />
             </MenuButton>
             <MenuList className="menu__list">

ui/scss/component/_claim-list.scss

@@ -79,7 +79,7 @@
 
   &:hover {
     .claim__menu-button {
-      display: block;
+      opacity: 1 !important;
     }
   }
 }
@@ -471,7 +471,7 @@
     cursor: pointer;
 
     .claim__menu-button {
-      opacity: 1;
+      opacity: 1 !important;
     }
     .collection-preview__overlay-thumbs {
       opacity: 1;
@@ -738,14 +738,6 @@
   .claim__menu-button {
     right: 0.2rem;
     top: var(--spacing-s);
-
-    &:focus {
-      opacity: 1;
-      .icon {
-        background-color: var(--color-button-alt-bg);
-        border-radius: var(--border-radius);
-      }
-    }
   }
 }
 
@@ -758,8 +750,16 @@
     stroke: var(--color-text);
   }
 
+  &:focus {
+    opacity: 1;
+    .icon {
+      background-color: var(--color-button-alt-bg);
+      border-radius: var(--border-radius);
+    }
+  }
+
   @media (min-width: $breakpoint-small) {
-    &:not([aria-expanded='true']) {
+    &:not(:focus):not([aria-expanded='true']) {
       opacity: 0;
     }
   }

ui/scss/component/_notification.scss

@@ -219,7 +219,10 @@ $contentMaxWidth: 60rem;
     stroke: var(--color-text-help);
   }
 
-  button {
+  .notification__menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: var(--border-radius);
 
     &:focus {