@ndla/ui 50.9.4 → 50.9.6

package/src/AudioPlayer/Controls.tsx

@@ -12,7 +12,7 @@ import styled from "@emotion/styled";
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from "@radix-ui/react-popover";
 import { Root as SliderRoot, Track, Range, SliderThumb } from "@radix-ui/react-slider";
 import { ButtonV2, IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from "@ndla/dropdown-menu";
 import { Back15, Forward15 } from "@ndla/icons/action";
 import { Play, Pause, VolumeUp } from "@ndla/icons/common";
@@ -149,7 +149,7 @@ const VolumeList = styled(PopoverContent)`
   padding: ${spacing.small};
   border: 1px solid ${colors.brand.lighter};
   height: 128px;
-  z-index: 2;
+  z-index: ${stackOrder.offsetDouble};
 `;
 
 const VolumeSliderWrapper = styled(SliderRoot)`

package/src/ContentPlaceholder/ContentPlaceholder.tsx

@@ -7,11 +7,11 @@
  */
 
 import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { colors, stackOrder } from "@ndla/core";
 
 const Wrapper = styled.div`
   position: fixed;
-  z-index: 98;
+  z-index: ${stackOrder.dropdown - stackOrder.offsetSingle};
   top: 0;
   left: 0;
   right: 0;

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -9,7 +9,7 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { colors, stackOrder } from "@ndla/core";
 import { Link } from "@ndla/icons/common";
 import Tooltip from "@ndla/tooltip";
 import { copyTextToClipboard } from "@ndla/util";
@@ -23,7 +23,7 @@ const IconButton = styled.button`
   top: 0.1em;
   background: none;
   border: 0;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   transition: 0.2s;
   opacity: 0;
   color: ${colors.brand.grey};

package/src/Embed/ConceptEmbed.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { Root, Trigger, Content, Anchor, Close, Portal } from "@radix-ui/react-popover";
 import { IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
 import { Cross } from "@ndla/icons/action";
 import { COPYRIGHTED } from "@ndla/licenses";
 import Tooltip from "@ndla/tooltip";
@@ -49,7 +49,7 @@ const PopoverWrapper = styled.div<PopoverPosition>`
       top: 0 !important;
       left: 0 !important;
       width: 100vw;
-      z-index: 100 !important;
+      z-index: ${stackOrder.popover} !important;
       height: 100vh;
       min-width: 100vw !important;
     }
@@ -196,19 +196,12 @@ const NotionButton = styled.button`
   color: ${colors.notion.dark};
   cursor: pointer;
   &:focus,
-  &:hover {
-    background-color: ${colors.notion.dark};
-    color: ${colors.white};
-    outline: none;
-    ${BaselineIcon} {
-      border-color: transparent;
-    }
-  }
-
-  &:active {
+  &:hover,
+  &:active,
+  &[data-open="true"] {
     color: ${colors.notion.dark};
     background-color: ${colors.notion.light};
-    ${BaselineIcon} {
+    [data-baseline-icon] {
       border-color: currentColor;
     }
   }
@@ -231,7 +224,7 @@ const getModalPosition = (anchor: HTMLElement) => {
   const article = anchor.closest(".c-article");
   const articlePos = article?.getBoundingClientRect();
   const anchorPos = anchor.getBoundingClientRect();
-  return anchorPos.top - (articlePos?.top || -window.scrollY);
+  return anchorPos.top - (articlePos?.top || -window.scrollY) + 30; // add 30 so that position is under the word
 };
 
 export const InlineConcept = ({
@@ -272,9 +265,9 @@ export const InlineConcept = ({
         <StyledAnchorSpan />
       </StyledAnchor>
       <Trigger asChild>
-        <NotionButton>
+        <NotionButton data-open={modalPos !== -9999}>
           {linkText}
-          {<BaselineIcon />}
+          {<BaselineIcon data-baseline-icon />}
         </NotionButton>
       </Trigger>
       <Portal container={(anchorRef.current?.closest(".c-article") as HTMLElement | null) || undefined}>

package/src/Embed/conceptComponents.tsx

@@ -10,7 +10,7 @@ import { forwardRef, ReactNode, RefAttributes } from "react";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 import { COPYRIGHTED } from "@ndla/licenses";
 import { ConceptData, ConceptVisualElementMeta } from "@ndla/types-embed";
 import { ExternalEmbed, HeartButtonType, IframeEmbed } from ".";
@@ -87,7 +87,7 @@ const notionContentCss = css`
   animation-name: animateIn;
   animation-duration: 300ms;
   background-color: white;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
   ${mq.range({ from: breakpoints.tablet })} {
     width: 500px;
@@ -98,7 +98,7 @@ const notionContentCss = css`
 
   ${mq.range({ until: breakpoints.tablet })} {
     padding: ${spacing.small};
-    z-index: 100;
+    z-index: ${stackOrder.popover};
     height: 100%;
     width: 100%;
     overflow: auto;

package/src/FactBox/FactBox.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
 import { ChevronDown, ChevronUp } from "@ndla/icons/common";
 
 interface Props extends ComponentProps<"aside"> {
@@ -26,7 +26,7 @@ const StyledAside = styled.aside`
   flex-direction: column;
   align-items: center;
   position: relative;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   margin: ${spacing.large} 0 calc(${spacing.large} - ${spacing.nsmall}) 0;
   overflow: hidden;
   padding-bottom: ${spacing.nsmall};
@@ -75,7 +75,7 @@ const StyledDiv = styled.div`
     /* The 00 after our color is to set its opacity to 0 */
     background: linear-gradient(${colors.brand.light}00, ${colors.white});
     opacity: 1;
-    z-index: 0;
+    z-index: ${stackOrder.base};
   }
 
   @media print {
@@ -102,7 +102,7 @@ const StyledDiv = styled.div`
 
 const StyledIconButton = styled(IconButtonV2)`
   margin-top: -20px;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
 
   @media print {
     display: none;
@@ -117,7 +117,7 @@ const expandedContentStyle = css`
   max-height: 500vh;
   &:after {
     opacity: 0;
-    z-index: -1;
+    z-index: ${stackOrder.hide};
   }
 `;
 

package/src/Figure/component.figure.scss

@@ -239,7 +239,7 @@
     margin-top: $spacing--small;
 
     [data-icon] {
-      margin-left: $spacing--small/2;
+      margin-left: $spacing--xsmall;
       width: 18px;
       height: 18px;
     }
@@ -267,7 +267,7 @@
   }
 
   &__link-description {
-    margin-top: $spacing--small/2 !important;
+    margin-top: $spacing--xsmall !important;
     margin-bottom: 0;
     @include font-size(14px, 25px);
   }

package/src/Filter/FilterCarousel.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import { useSwipeable } from "react-swipeable";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { stackOrder } from "@ndla/core";
 import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
 
 interface Props {
@@ -47,7 +48,7 @@ const NavButton = styled("button")<{
   position: absolute;
   bottom: 0;
   top: 4px;
-  z-index: 3;
+  z-index: ${stackOrder.trigger};
   left: 3px;
 
   svg {

package/src/Filter/component.filter.scss

@@ -43,7 +43,7 @@
       &:not(:last-child) {
         margin-bottom: $spacing--small;
         @include mq(tabletWide) {
-          margin-bottom: $spacing--small / 2;
+          margin-bottom: $spacing--xsmall;
         }
       }
       &:not(:first-child) {
@@ -131,7 +131,7 @@
       @include mq($until: mobileWide) {
         width: 100% !important;
         margin: $spacing 0 0 0 !important;
-        padding: $spacing--small / 2 20px;
+        padding: $spacing--xsmall 20px;
         background: $brand-grey--lighter;
         flex-direction: row;
         .c-filter__item label {
@@ -329,7 +329,7 @@
       }
       @include mq($until: mobileWide) {
         width: 100%;
-        padding: $spacing--small / 2 0;
+        padding: $spacing--xsmall 0;
         justify-content: space-between;
         min-height: 52px;
         align-items: center;
@@ -430,7 +430,7 @@
     }
     @include mq($until: mobileWide) {
       margin-top: 0;
-      padding: $spacing--small / 2 $spacing;
+      padding: $spacing--xsmall $spacing;
       width: 100%;
       justify-content: space-between;
       min-height: 52px;
@@ -483,7 +483,7 @@
       padding-bottom: 0;
       flex-direction: row;
       button {
-        margin-right: $spacing--small / 2;
+        margin-right: $spacing--xsmall;
         width: auto;
       }
     }

package/src/Footer/Footer.tsx

@@ -9,8 +9,9 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { colors, spacing, fonts, mq, breakpoints, spacingUnit } from "@ndla/core";
+import { colors, spacing, fonts, mq, breakpoints, spacingUnit, stackOrder } from "@ndla/core";
 import { FooterHeaderIcon } from "@ndla/icons/common";
+import { Text } from "@ndla/typography";
 import FooterLinks from "./FooterLinks";
 import FooterPrivacy from "./FooterPrivacy";
 import { OneColumn } from "../Layout";
@@ -31,18 +32,18 @@ const StyledDiv = styled.div`
   position: relative;
   background: ${colors.brand.dark};
   overflow: hidden;
-  z-index: 0;
+  z-index: ${stackOrder.base};
   &[data-margin="true"] {
     margin-top: ${spacing.xxlarge};
   }
 `;
 
 const StyledOneColumn = styled(OneColumn)`
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   position: relative;
 `;
 
-const StyledHeader = styled.h2`
+const StyledText = styled(Text)`
   ${fonts.sizes(20, 1.5)};
   margin: 0;
   font-weight: ${fonts.weight.semibold};
@@ -101,7 +102,7 @@ const StyledHr = styled.hr`
 
 const StyledLanguageWrapper = styled.div`
   position: relative;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   margin-top: ${spacing.normal};
   display: flex;
   align-items: center;
@@ -147,7 +148,9 @@ const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyL
             <StyledFooterHeaderIcon />
           </div>
           <div>
-            <StyledHeader>{t("footer.vision")}</StyledHeader>
+            <StyledText element="div" textStyle="content-alt" margin="none">
+              {t("footer.vision")}
+            </StyledText>
             <FooterLinks commonLinks={commonLinks} links={links} />
           </div>
         </StyledColumns>

package/src/Footer/FooterLinks.tsx

@@ -9,9 +9,10 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from "@ndla/core";
+import { spacing, fonts, colors, mq, breakpoints } from "@ndla/core";
 import { Forward, Launch } from "@ndla/icons/common";
 import SafeLink from "@ndla/safelink";
+import { Text } from "@ndla/typography";
 
 const StyledLinksWrapper = styled.div`
   display: flex;
@@ -85,10 +86,9 @@ const StyledSocialMediaLinkWrapper = styled.div`
   align-items: center;
 `;
 
-const StyledHeaderLinks = styled.h3`
+const StyledTextLinks = styled(Text)`
   ${fonts.sizes(16, 1.5)};
   font-weight: ${fonts.weight.semibold};
-  margin: ${spacing.xsmall} 0;
 `;
 
 const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
@@ -97,7 +97,9 @@ const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
     <>
       <StyledLinksWrapper>
         <div>
-          <StyledHeaderLinks id="otherLinks">{t("footer.linksHeader")}</StyledHeaderLinks>
+          <StyledTextLinks id="otherLinks" element="span" textStyle="content-alt">
+            {t("footer.linksHeader")}
+          </StyledTextLinks>
           <StyledNav aria-labelledby="otherLinks">
             {commonLinks?.map((link) => (
               <div key={link.to}>

package/src/Hero/HeroContent.tsx

@@ -7,14 +7,14 @@
  */
 
 import styled from "@emotion/styled";
-import { spacing, mq, breakpoints } from "@ndla/core";
+import { breakpoints, mq, spacing, stackOrder } from "@ndla/core";
 
 export const HeroContent = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   padding: ${spacing.small} 0 ${spacing.small};
-  z-index: 9;
+  z-index: ${stackOrder.trigger};
 
   ${mq.range({ from: breakpoints.tablet })} {
     min-height: 90px;

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -8,7 +8,7 @@
 
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils } from "@ndla/core";
+import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils, stackOrder } from "@ndla/core";
 import { LearningPathRead } from "@ndla/icons/contentType";
 import SafeLink from "@ndla/safelink";
 import { StepProps } from "./LearningPathMenu";
@@ -136,7 +136,7 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
 
 const StyledContentType = styled.div`
   position: relative;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   margin-right: ${spacingUnit * 0.75}px;
   max-height: 35px;
 `;
@@ -175,7 +175,7 @@ const StyledNavigation = styled.nav<StyledNavigationProps>`
           a:hover,
           a:focus {
             position: relative;
-            z-index: 1;
+            z-index: ${stackOrder.offsetSingle};
             width: ${SIDE_NAV_WIDTH};
             background: ${colors.brand.greyLighter};
             span {

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
-import { spacing, mq, breakpoints, colors } from "@ndla/core";
+import { spacing, mq, breakpoints, colors, stackOrder } from "@ndla/core";
 import { LearningPath } from "@ndla/icons/contentType";
 import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from "@ndla/modal";
 
@@ -21,7 +21,7 @@ const buttonToggleCss = css`
   }
   margin-right: auto;
   margin-left: ${spacing.normal};
-  z-index: 100;
+  z-index: ${stackOrder.popover};
   svg {
     width: 20px;
     height: 20px;

package/src/LearningPaths/LearningPathSticky.tsx

@@ -10,7 +10,7 @@ import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { colors, spacing, animations, mq, breakpoints } from "@ndla/core";
+import { animations, breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
 import { Back, Forward } from "@ndla/icons/common";
 import SafeLink from "@ndla/safelink";
 
@@ -27,7 +27,7 @@ const StyledFooter = styled.nav`
     height: calc(${FOOTER_HEIGHT_MOBILE} + var(--safe-area-inset-bottom));
     min-height: var(-webkit-fill-available);
     position: fixed;
-    z-index: 2;
+    z-index: ${stackOrder.offsetDouble};
     bottom: 0;
     left: 0;
     right: 0;

package/src/Masthead/Masthead.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
 import SkipToMainContent from "./SkipToMainContent";
 import { MessageBanner } from "../Messages";
 
@@ -35,7 +35,7 @@ interface StyledMastheadProps {
 }
 
 const StyledMasthead = styled.div<StyledMastheadProps>`
-  z-index: 99;
+  z-index: ${stackOrder.banner};
   position: relative;
   background: white;
   border-bottom: 1px solid ${colors.brand.greyLighter};

package/src/Masthead/SkipToMainContent.tsx

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { colors, stackOrder } from "@ndla/core";
 
 interface Props {
   skipToMainContentId: string;
@@ -33,7 +33,7 @@ const StyledSkipToMainContent = styled.a`
   border: 4px solid ${colors.brand.tertiary};
   text-align: center;
   font-size: 1.2em;
-  z-index: 9999;
+  z-index: ${stackOrder.popover};
   animation-name: fadeIn;
   animation-duration: 0.3s;
   transform: translateY(-150%);

package/src/MediaList/MediaList.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentProps, ReactNode } from "react";
 import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
 import { Launch } from "@ndla/icons/common";
 import {
   getLicenseByAbbreviation,
@@ -19,7 +19,7 @@ import {
 import type { MetaType } from "@ndla/licenses";
 import { LicenseDescription } from "@ndla/notion";
 import SafeLink from "@ndla/safelink";
-import { Heading, Text } from "@ndla/typography";
+import { Text } from "@ndla/typography";
 import { uuid } from "@ndla/util";
 
 const StyledMediaList = styled.ul`
@@ -90,7 +90,7 @@ const OpenIndicator = styled.div`
   background-color: ${colors.brand.primary};
   border-radius: 100%;
   pointer-events: none;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   svg {
     color: ${colors.white};
     width: ${spacing.normal};

package/src/MyNdla/Resource/Folder.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { fonts, spacing, colors, mq, breakpoints } from "@ndla/core";
+import { fonts, spacing, colors, mq, breakpoints, stackOrder } from "@ndla/core";
 import { FileDocumentOutline, Share } from "@ndla/icons/common";
 import { FolderOutlined, FolderSharedOutlined } from "@ndla/icons/contentType";
 import { ResourceTitleLink } from "../../Resource/resourceComponents";
@@ -91,7 +91,7 @@ const FolderTitle = styled.h2`
 
 const MenuWrapper = styled.div`
   display: flex;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   flex-direction: row;
   align-items: center;
   justify-content: space-between;

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from "@emotion/styled";
-import { spacing, spacingUnit, colors, fonts, misc } from "@ndla/core";
+import { spacing, spacingUnit, colors, fonts, misc, stackOrder } from "@ndla/core";
 import { MovieResourceType } from "./types";
 
 const StyledWrapperDiv = styled.div`
@@ -17,14 +17,14 @@ const StyledWrapperDiv = styled.div`
   position: absolute;
   bottom: 0px;
   left: 0px;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
 `;
 
 const StyledMovieTags = styled.span`
   ${fonts.sizes("14px", "16px")};
   font-weight: ${fonts.weight.semibold};
   background: ${colors.brand.greyLight};
-  padding: calc(${spacing.xsmall} / 2) ${spacing.xsmall};
+  padding: ${spacing.xxsmall} ${spacing.xsmall};
   border-radius: ${misc.borderRadius};
   color: ${colors.text.primary};
   margin-right: ${spacingUnit / 4}px;

package/src/Navigation/NavigationBox.tsx

@@ -37,11 +37,11 @@ const StyledHeading = styled(Heading)`
 const StyledList = styled.ul`
   list-style: none;
   padding: 0;
-  display: flex;
-  flex-direction: column;
   gap: ${spacing.xxsmall};
 
   &[data-direction="horizontal"] {
+    display: flex;
+    flex-direction: column;
     ${mq.range({ from: breakpoints.tablet })} {
       column-count: 2;
       gap: 20px;

package/src/Resource/BlockResource.tsx

@@ -8,7 +8,7 @@
 
 import { ReactNode } from "react";
 import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
+import { colors, spacing, stackOrder } from "@ndla/core";
 import { Text } from "@ndla/typography";
 import {
   CompressedTagList,
@@ -72,7 +72,7 @@ const TagsAndActionMenu = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
 `;
 
 const BlockInfoWrapper = styled.div`

package/src/Resource/ListResource.tsx

@@ -8,7 +8,7 @@
 
 import { ReactNode } from "react";
 import styled from "@emotion/styled";
-import { spacing, colors, breakpoints, mq } from "@ndla/core";
+import { spacing, colors, breakpoints, mq, stackOrder } from "@ndla/core";
 import { Text } from "@ndla/typography";
 import {
   CompressedTagList,
@@ -101,7 +101,7 @@ const StyledResourceDescription = styled(Text)`
 
 const TagsandActionMenu = styled.div`
   grid-area: tags;
-  z-index: 1;
+  z-index: ${stackOrder.offsetSingle};
   box-sizing: content-box;
   display: grid;
   grid-template-columns: 1fr auto auto;

package/src/Resource/resourceComponents.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
-import { colors, fonts, spacing } from "@ndla/core";
+import { colors, fonts, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from "@ndla/dropdown-menu";
 import { HashTag } from "@ndla/icons/common";
 import SafeLink, { SafeLinkButton } from "@ndla/safelink";
@@ -30,7 +30,7 @@ export const ResourceTitleLink = styled(SafeLink)`
   :after {
     content: "";
     position: absolute;
-    z-index: 1;
+    z-index: ${stackOrder.offsetSingle};
     top: 0;
     right: 0;
     bottom: 0;