@ndla/ui 50.9.5 → 50.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.5",
+  "version": "50.9.7",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.24",
-    "@ndla/button": "^12.0.29",
-    "@ndla/carousel": "^4.0.29",
-    "@ndla/core": "^4.3.7",
-    "@ndla/dropdown-menu": "^1.0.27",
-    "@ndla/forms": "^5.2.20",
+    "@ndla/accordion": "^3.0.26",
+    "@ndla/button": "^12.0.31",
+    "@ndla/carousel": "^4.0.30",
+    "@ndla/core": "^4.4.0",
+    "@ndla/dropdown-menu": "^1.0.28",
+    "@ndla/forms": "^5.2.22",
     "@ndla/hooks": "^2.1.5",
-    "@ndla/icons": "^5.0.8",
+    "@ndla/icons": "^5.0.9",
     "@ndla/licenses": "^7.2.5",
-    "@ndla/modal": "^5.0.28",
-    "@ndla/notion": "^6.0.29",
-    "@ndla/safelink": "^4.1.54",
-    "@ndla/select": "^3.3.3",
-    "@ndla/switch": "^1.1.33",
-    "@ndla/tabs": "^3.2.13",
-    "@ndla/tooltip": "^6.0.15",
-    "@ndla/typography": "^0.4.10",
+    "@ndla/modal": "^5.0.29",
+    "@ndla/notion": "^6.0.30",
+    "@ndla/safelink": "^4.1.56",
+    "@ndla/select": "^3.3.4",
+    "@ndla/switch": "^1.1.34",
+    "@ndla/tabs": "^3.2.14",
+    "@ndla/tooltip": "^6.0.17",
+    "@ndla/typography": "^0.4.11",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8662822e5a1f4521c58caad125c525f353d7ade9"
+  "gitHead": "0ac986c583fdda4957ce9dd298043ac459052704"
 }

package/src/Article/ArticleNotions.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { mq, breakpoints, fonts, colors } from "@ndla/core";
+import { breakpoints, colors, fonts, mq, stackOrder } from "@ndla/core";
 import { Explanation, NotionFlip } from "@ndla/icons/common";
 import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from "@ndla/modal";
 
@@ -37,7 +37,7 @@ const NotionsTrigger = styled.div`
     top: 12rem;
     right: 18px;
     background-color: transparent;
-    z-index: 10;
+    z-index: ${stackOrder.trigger};
   }
 
   svg {

package/src/Article/component.article.scss

@@ -154,12 +154,12 @@
     left: 0;
 
     @include mq(tablet) {
-      top: $spacing--small / 2;
+      top: $spacing--xsmall;
     }
 
     @include mq(desktop) {
       left: -80px;
-      top: $spacing--small / 2;
+      top: $spacing--xsmall;
     }
   }
 }

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";
@@ -37,6 +37,7 @@ const PopoverWrapper = styled.div<PopoverPosition>`
     left: 50% !important;
     transform: translateX(-50%) !important;
     top: ${({ top }) => top}px !important;
+    z-index: ${stackOrder.popover} !important;
   }
 
   ${mq.range({ until: breakpoints.tablet })} {
@@ -49,7 +50,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 +197,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 +225,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 +266,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,7 +9,7 @@
 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";
@@ -32,14 +32,14 @@ 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;
 `;
 
@@ -102,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;

package/src/Grid/Grid.tsx

@@ -24,6 +24,7 @@ const GridContainer = styled.div`
   border-radius: ${misc.borderRadius};
   grid-template-columns: 1fr;
   grid-gap: ${spacing.normal};
+  padding: ${spacing.normal};
 
   ${mq.range({ until: breakpoints.tabletWide })} {
     &[data-columns="2x2"],
@@ -68,6 +69,7 @@ const GridContainer = styled.div`
 
   p {
     word-break: break-word;
+    margin-top: 0px;
   }
 `;
 

package/src/Hero/Hero.tsx

@@ -87,7 +87,7 @@ const StyledDiv = styled.div`
       + div article.c-article {
         background: ${colors.white};
         margin: 0 -${spacing.normal};
-        padding: ${spacing.large} ${spacing.normal} ${spacing.normal} 0;
+        padding: ${spacing.large} ${spacing.normal} ${spacing.normal} ${spacing.normal};
       }
     }
   }

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/KeyFigure/KeyFigure.tsx

@@ -17,7 +17,7 @@ const ContentWrapper = styled.div`
   padding: ${spacing.small};
   align-items: center;
   ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.medium} ${spacing.large};
+    padding: ${spacing.xsmall} ${spacing.nsmall};
   }
 `;
 

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