style: fix icon orientation and padding

src/components/item/ItemActors.tsx

@@ -181,7 +181,7 @@ function ActorExternalIds(props: ActorExternalIdsProps): JSX.Element {
   }
 
   return (
-    <div>
+    <div className={css['values']}>
       {externalIds.map((id) => {
         if (internalExternalIds.includes(id.identifierService.code)) return null
 

src/components/item/ItemMedia.module.css

@@ -10,6 +10,7 @@
 .media-container {
   position: relative;
   display: grid;
+  gap: var(--space-4);
   height: var(--size-64);
   padding: var(--space-8) var(--space-10);
   place-items: center;
@@ -45,22 +46,19 @@
 
     &[data-direction='next'] {
       border-left: 1px solid var(--color-border);
-
-      & svg {
-        transform: rotate(-90deg);
-      }
     }
 
     &[data-direction='prev'] {
       border-right: 1px solid var(--color-border);
 
       & svg {
-        transform: rotate(90deg);
+        transform: rotate(180deg);
       }
     }
 
     & > .button {
       display: grid;
+      width: 100%;
       padding: 0;
       border: none;
       background: none;
@@ -111,3 +109,10 @@
     }
   }
 }
+
+.caption {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: center;
+}

src/components/item/ItemMedia.tsx

@@ -166,7 +166,7 @@ function MediaCaption(props: MediaCaptionProps): JSX.Element {
   }
 
   return (
-    <figcaption>
+    <figcaption className={css['caption']}>
       {caption}
       {license != null ? <span>({license})</span> : null}
     </figcaption>

src/components/item/ItemMetadata.module.css

@@ -9,6 +9,7 @@
   display: grid;
   row-gap: var(--gap);
   font-size: var(--font-size-ui-base);
+  line-height: var(--size-7);
 
   & > :not(:last-child)::after {
     content: '';
@@ -84,3 +85,9 @@
     color: var(--color-link-text-hover);
   }
 }
+
+.values {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-2-5);
+}