m3tab styling fix

src/routes/notifications.tsx

···
         //console.log(wow);
         return wow;
       });
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
···
       >
         <TabsPrimitive.Trigger
           value="mentions"
+          className="m3tab"
           // styling is in app.css
         >
           Mentions
         </TabsPrimitive.Trigger>
-        <TabsPrimitive.Trigger value="follows">Follows</TabsPrimitive.Trigger>
-        <TabsPrimitive.Trigger value="postInteractions">
+        <TabsPrimitive.Trigger value="follows" className="m3tab">
+          Follows
+        </TabsPrimitive.Trigger>
+        <TabsPrimitive.Trigger value="postInteractions" className="m3tab">
           Post Interactions
         </TabsPrimitive.Trigger>
       </TabsPrimitive.List>

src/styles/app.css

···
 
 /* radix tabs */
 
-[data-radix-collection-item] {
+.m3tab[data-radix-collection-item] {
   flex: 1;
   display: flex;
   padding: 12px 8px;
···
   justify-content: center;
   color: var(--color-gray-500);
   font-weight: 500;
+  &:hover {
+    background-color: var(--color-gray-100);
+    cursor: pointer;
+  }
   &[aria-selected="true"] {
     color: var(--color-gray-950);
     &::before{
···
 }
 
 @media (prefers-color-scheme: dark) {
-  [data-radix-collection-item] {
+  .m3tab[data-radix-collection-item] {
     color: var(--color-gray-400);
+    &:hover {
+      background-color: var(--color-gray-900);
+      cursor: pointer;
+    }
     &[aria-selected="true"] {
       color: var(--color-gray-50);
       &::before{