lint

* wrap details item

* more details nits

scripts/inject-smartbanner.js

@@ -32,20 +32,20 @@ if (
     /* hardcoded injection depending on whether the app is available on App Store and/or Google Play */
 
     if (SMARTBANNER_APPSTORE_URL) {
-      smartbanner = `\t<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">\n` + smartbanner;
+      smartbanner = `\t<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">\n${smartbanner}`;
     }
     if (SMARTBANNER_GOOGLEPLAY_URL) {
-      smartbanner = `\t<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">\n` + smartbanner;
+      smartbanner = `\t<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">\n${smartbanner}`;
     }
     if (SMARTBANNER_APPSTORE_URL) {
       if (SMARTBANNER_GOOGLEPLAY_URL) {
-        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android,ios">\n` + smartbanner;
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android,ios">\n${smartbanner}`;
       } else {
-        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="ios">\n` + smartbanner;
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="ios">\n${smartbanner}`;
       }
     } else {
       if (SMARTBANNER_GOOGLEPLAY_URL) {
-        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android">\n` + smartbanner;
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android">\n${smartbanner}`;
       }
     }
 

src/components/Details.tsx

@@ -133,6 +133,7 @@ const detailsLayoutVariants = {
   row: css`
     ${layoutMixins.row}
     align-self: stretch;
+    white-space: nowrap;
   `,
 
   rowColumns: css`
@@ -159,12 +160,16 @@ const itemLayoutVariants: Record<string, FlattenInterpolation<ThemeProps<any>>>
 
     ${layoutMixins.spacedRow}
     gap: 0.5rem;
+    align-items: start;
+    padding: 0.5rem 0;
 
     min-height: var(--details-item-height);
 
-    > :last-child {
-      align-self: stretch;
+    > :first-child > abbr {
+      min-width: auto;
+    }
 
+    > :last-child {
       ${layoutMixins.row}
       ${layoutMixins.stickyRight}
 
@@ -217,8 +222,6 @@ Styled.Details = styled.dl<{
   --details-grid-numColumns: 2;
 
   ${({ layout }) => layout && detailsLayoutVariants[layout]}
-
-  white-space: nowrap;
 `;
 
 Styled.Item = styled.div<{
@@ -231,7 +234,7 @@ Styled.Item = styled.div<{
   ${({ justifyItems }) =>
     justifyItems === 'end' &&
     css`
-      &:nth-child(even) {
+      > :nth-child(even) {
         justify-items: end;
         text-align: end;
       }
@@ -243,6 +246,7 @@ Styled.Item = styled.div<{
     {
       column: css`
         &:not(:hover) > :first-child {
+          white-space: nowrap;
           overflow-x: hidden;
           text-overflow: ellipsis;
         }

src/components/DetailsDialog.tsx

@@ -26,7 +26,7 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }:
       placement={isTablet ? DialogPlacement.Default : DialogPlacement.Sidebar}
     >
       <Styled.Content>
-        <Styled.Details withSeparators items={items} />
+        <Styled.Details withSeparators justifyItems="end" items={items} />
 
         <Styled.Footer>{slotFooter}</Styled.Footer>
       </Styled.Content>