From 9d11389a9d08c962feb49a3c744d09c1eaf445ea Mon Sep 17 00:00:00 2001
From: Andrew Edstrom <andrewedstrom@gmail.com>
Date: Sat, 16 Dec 2023 19:06:10 -0800
Subject: [PATCH] fix(widget): adjust detail cell styles hoping to fix the
 weird bug (#216)

---
 packages/widget/index.html    | 313 ++++++++++++++++++----------------
 packages/widget/src/styles.ts |   7 +-
 2 files changed, 172 insertions(+), 148 deletions(-)

diff --git a/packages/widget/index.html b/packages/widget/index.html
index f76649bc..23675f78 100644
--- a/packages/widget/index.html
+++ b/packages/widget/index.html
@@ -26,197 +26,220 @@
 <script>
   customElements.whenDefined('docmaps-widget').then(() => {
     const exampleDocmap = {
-      '@context': 'https://w3id.org/docmaps/context.jsonld',
-      'type': 'docmap',
-      'id': 'https://data-hub-api.elifesciences.org/enhanced-preprints/docmaps/v1/get-by-doi?preprint_doi=10.1101%2F2022.11.08.000001',
-      'created': '2022-11-28T11:30:05+00:00',
-      'updated': '2022-11-28T11:30:05+00:00',
-      'publisher': {
-        'account': {
-          'id': 'https://sciety.org/groups/elife',
-          'service': 'https://sciety.org',
+      "@context": "https://w3id.org/docmaps/context.jsonld",
+      "type": "docmap",
+      "id": "https://data-hub-api.elifesciences.org/enhanced-preprints/docmaps/v1/get-by-doi?preprint_doi=10.1101%2F2022.11.08.000002",
+      "created": "2022-11-28T11:30:05+00:00",
+      "updated": "2022-11-28T11:30:05+00:00",
+      "publisher": {
+        "account": {
+          "id": "https://sciety.org/groups/elife",
+          "service": "https://sciety.org"
         },
-        'homepage': 'https://elifesciences.org/',
-        'id': 'https://elifesciences.org/',
-        'logo': 'https://sciety.org/static/groups/elife--b560187e-f2fb-4ff9-a861-a204f3fc0fb0.png',
-        'name': 'eLife',
+        "homepage": "https://elifesciences.org/",
+        "id": "https://elifesciences.org/",
+        "logo": "https://sciety.org/static/groups/elife--b560187e-f2fb-4ff9-a861-a204f3fc0fb0.png",
+        "name": "eLife"
       },
-      'first-step': '_:b0',
-      'steps': {
-        '_:b0': {
-          'actions': [
+      "first-step": "_:b0",
+      "steps": {
+        "_:b0": {
+          "actions": [
             {
-              'participants': [],
-              'outputs': [
+              "participants": [
                 {
-                  'type': 'preprint',
-                  'doi': '10.1101/2022.11.08.000001',
-                  'url': 'https://www.biorxiv.org/content/10.1101/2022.11.08.000001v2',
-                  'published': '2022-11-22',
-                  'versionIdentifier': '2',
+                  "actor": {
+                    "name": "eve",
+                    "type": "person"
+                  },
+                  "role": "spaceship-builder"
                 },
+                {
+                  "actor": {
+                    "name": "Andrew Edstrom",
+                    "type": "person"
+                  },
+                  "role": "gun-for-hire"
+                }
               ],
-            },
+              "outputs": [
+                {
+                  "type": "preprint",
+                  "doi": "10.1101/2022.11.08.000002",
+                  "id": "sick-preprint-bro",
+                  "url": "https://example.com/sick-preprint-yo",
+                  "published": "1993-10-20",
+                  "versionIdentifier": "2",
+                  "content": [
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.png"
+                    },
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.heic"
+                    }
+                  ]
+                }
+              ]
+            }
           ],
-          'assertions': [
+          "assertions": [
             {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.1101/2022.11.08.000001',
-                'versionIdentifier': '2',
+              "item": {
+                "type": "preprint",
+                "doi": "10.1101/2022.11.08.000002",
+                "versionIdentifier": "2"
               },
-              'status': 'manuscript-published',
-            },
+              "status": "manuscript-published"
+            }
           ],
-          'inputs': [],
-          'next-step': '_:b1',
+          "inputs": [],
+          "next-step": "_:b1"
         },
-        '_:b1': {
-          'actions': [
+        "_:b1": {
+          "actions": [
             {
-              'participants': [],
-              'outputs': [
+              "participants": [],
+              "outputs": [
                 {
-                  'identifier': '85111',
-                  'versionIdentifier': '',
-                  'type': 'preprint',
-                  'doi': '10.7554/eLife.00001',
-                },
-              ],
-            },
+                  "identifier": "85111",
+                  "versionIdentifier": "",
+                  "type": "review-article",
+                  "doi": "10.7554/eLife.00002"
+                }
+              ]
+            }
           ],
-          'assertions': [
+          "assertions": [
             {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.1101/2022.11.08.000001',
-                'versionIdentifier': '2',
+              "item": {
+                "type": "preprint",
+                "doi": "10.1101/2022.11.08.000002",
+                "versionIdentifier": "2"
               },
-              'status': 'under-review',
-              'happened': '2022-11-28T11:30:05+00:00',
-            },
-            {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.7554/eLife.00001',
-                'versionIdentifier': '',
-              },
-              'status': 'draft',
-            },
+              "status": "under-review",
+              "happened": "2022-11-28T11:30:05+00:00"
+            }
           ],
-          'inputs': [
+          "inputs": [
             {
-              'type': 'preprint',
-              'doi': '10.1101/2022.11.08.000001',
-              'url': 'https://www.biorxiv.org/content/10.1101/2022.11.08.000001v2',
-              'versionIdentifier': '2',
-            },
+              "type": "preprint",
+              "doi": "10.1101/2022.11.08.000002",
+              "url": "https://example.com/sick-preprint-yo",
+              "versionIdentifier": "2"
+            }
           ],
-          'next-step': '_:b2',
-          'previous-step': '_:b0',
+          "next-step": "_:b2",
+          "previous-step": "_:b0"
         },
-        '_:b2': {
-          'actions': [
+        "_:b2": {
+          "actions": [
             {
-              'participants': [
+              "participants": [
                 {
-                  'actor': {
-                    'name': 'anonymous',
-                    'type': 'person',
+                  "actor": {
+                    "name": "anonymous",
+                    "type": "person"
                   },
-                  'role': 'peer-reviewer',
-                },
+                  "role": "peer-reviewer"
+                }
               ],
-              'outputs': [
+              "outputs": [
                 {
-                  'type': 'review-article',
-                  'published': '2023-01-23T14:34:44.369019+00:00',
-                  'content': [
+                  "type": "review-article",
+                  "published": "2023-01-23T14:34:43.676466+00:00",
+                  "content": [
                     {
-                      'type': 'web-page',
-                      'url': 'https://hypothes.is/a/FD5EmpsrEe28RaOWOszMEw',
+                      "type": "web-page",
+                      "url": "https://hypothes.is/a/E9MOvpsrEe2w6nds1t6xxQ"
                     },
                     {
-                      'type': 'web-page',
-                      'url': 'https://sciety.org/articles/activity/10.1101/2022.11.08.000001#hypothesis:FD5EmpsrEe28RaOWOszMEw',
+                      "type": "web-page",
+                      "url": "https://sciety.org/articles/activity/10.1101/2022.11.08.000002#hypothesis:E9MOvpsrEe2w6nds1t6xxQ"
                     },
                     {
-                      'type': 'web-page',
-                      'url': 'https://sciety.org/evaluations/hypothesis:FD5EmpsrEe28RaOWOszMEw/content',
-                    },
-                  ],
-                },
-              ],
+                      "type": "web-page",
+                      "url": "https://sciety.org/evaluations/hypothesis:E9MOvpsrEe2w6nds1t6xxQ/content"
+                    }
+                  ]
+                }
+              ]
             },
             {
-              'participants': [
+              "participants": [
                 {
-                  'actor': {
-                    'name': 'Andrew Edstrom',
-                    'type': 'person',
+                  "actor": {
+                    "name": "anonymous",
+                    "type": "person"
                   },
-                  'role': 'editor',
-                },
+                  "role": "peer-reviewer"
+                }
               ],
-              'outputs': [
-                {
-                  'type': 'journal-article',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake-journal/article/3003',
-                },
+              "outputs": [
                 {
-                  'type': 'review',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/review/3003',
-                },
-                {
-                  'type': 'reply',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/reply/3003',
-                },
-                {
-                  'type': 'comment',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/comment/3003',
-                },
+                  "type": "review-article",
+                  "published": "2023-01-23T14:34:44.369019+00:00"
+                }
+              ]
+            },
+            {
+              "participants": [
                 {
-                  'type': 'editorial',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/editorial/3003',
-                },
+                  "actor": {
+                    "name": "Emily",
+                    "type": "person"
+                  },
+                  "role": "Product Manager"
+                }
+              ],
+              "outputs": [
                 {
-                  'type': 'evaluation-summary',
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake-evaluation/summary/3003',
+                  "published": "2023-01-23T14:34:45.299Z",
+                  "url": "https://example.com/fake-journal/summary/3000",
                 },
                 {
-                  'published': '2023-01-23T14:34:45.299Z',
-                  'url': 'https://example.com/fake/review/3003',
-                },
-
-              ],
-            },
+                  "type": "journal-article",
+                  "published": "2023-01-23T14:34:45.299Z",
+                  "url": "https://example.com/fake-journal/article/3003",
+                  "content": [
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.mp4"
+                    },
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.pdf"
+                    },
+                    {
+                      "type": "web-page",
+                      "url": "https://example.com/fake-journal/article/3003.xml"
+                    }
+                  ]
+                }
+              ]
+            }
           ],
-          'assertions': [
+          "assertions": [
             {
-              'item': {
-                'type': 'preprint',
-                'doi': '10.1101/2022.11.08.000001',
-                'versionIdentifier': '2',
+              "item": {
+                "type": "preprint",
+                "doi": "10.1101/2022.11.08.000002",
+                "versionIdentifier": "2"
               },
-              'status': 'peer-reviewed',
-            },
+              "status": "peer-reviewed"
+            }
           ],
-          'inputs': [
+          "inputs": [
             {
-              'type': 'preprint',
-              'doi': '10.7554/eLife.00001',
-            },
+              "type": "review-article",
+              "doi": "10.7554/eLife.00002"
+            }
           ],
-          'previous-step': '_:b1',
-        },
-      },
-    };
+          "previous-step": "_:b1"
+        }
+      }
+    }
     const widgetElement = document.getElementById('my-widget');
     widgetElement.docmap = exampleDocmap;
   });
diff --git a/packages/widget/src/styles.ts b/packages/widget/src/styles.ts
index d14de27e..2bf9696f 100644
--- a/packages/widget/src/styles.ts
+++ b/packages/widget/src/styles.ts
@@ -115,15 +115,17 @@ export const customCss: CSSResult = css`
 
     .metadata-grid {
         max-height: 100%;
+        max-width: 100%;
         display: grid;
-        grid-template-columns: 131px 369px;
+        grid-template-columns: 131px auto;
         grid-gap: 0;
         overflow-y: scroll;
+        overflow-x: hidden;
     }
 
     .metadata-grid-item {
         min-height: 47px;
-        max-width: 369px;
+        max-width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -142,7 +144,6 @@ export const customCss: CSSResult = css`
 
     .metadata-grid-item.value {
         font-weight: 300;
-        max-width: 369px;
         padding-right: 46px;
     }