From e93f195d59b6d94c3e2b6542b49c2875a0e478c6 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Thu, 28 Sep 2023 15:08:27 -0400
Subject: [PATCH] fix: Right Align Copy Buttons & `<btrix-desc-list>` vertical
 `width: 100%` (#1177)

* Reorders actions, adds tooltip

- All copy buttons on the collection share dialog are now on the right side
- Adds a tooltip to tell the user the button opens the link in a new tab

* Make vertical `dec-list` items fill 100% width of their parent container

- Allows for better placement of items within the container
- Adds horizontal padding to info bars

* Right align copy button in item details page
---
 frontend/src/components/desc-list.ts        |  5 +++++
 frontend/src/pages/org/collection-detail.ts | 24 ++++++++++++---------
 frontend/src/pages/org/crawl-detail.ts      | 12 +++++++----
 frontend/src/pages/org/workflow-detail.ts   |  2 +-
 4 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/desc-list.ts b/frontend/src/components/desc-list.ts
index b9ddb683..ef1bcf4e 100644
--- a/frontend/src/components/desc-list.ts
+++ b/frontend/src/components/desc-list.ts
@@ -46,6 +46,10 @@ export class DescListItem extends LitElement {
       justify-content: var(--justify-item, initial);
       border-right: var(--border-right, 0px);
     }
+
+    .content {
+      width: var(--width-full, initial);
+    }
   `;
 
   @property({ type: String })
@@ -71,6 +75,7 @@ export class DescList extends LitElement {
     .vertical {
       grid-template-columns: 100%;
       gap: 1rem;
+      --width-full: 100%;
     }
 
     .horizontal {
diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
index cc6042cd..7c609833 100644
--- a/frontend/src/pages/org/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail.ts
@@ -121,7 +121,9 @@ export class CollectionDetail extends LiteElement {
         </sl-button>
         ${when(this.isCrawler, this.renderActions)}
       </header>
-      <div class="border rounded-lg py-2 mb-3">${this.renderInfoBar()}</div>
+      <div class="border rounded-lg py-2 px-4 mb-3">
+        ${this.renderInfoBar()}
+      </div>
       <div class="mb-3">${this.renderTabs()}</div>
 
       ${choose(
@@ -217,21 +219,23 @@ export class CollectionDetail extends LiteElement {
           ${msg("This collection can be viewed by anyone with the link.")}
         </p>
         <div class="flex items-center rounded border">
+          <div class="text-base">
+            <sl-tooltip content="Open in New Tab">
+              <sl-icon-button
+                href=${publicReplayUrl}
+                name="box-arrow-up-right"
+                target="_blank"
+              >
+              </sl-icon-button>
+            </sl-tooltip>
+          </div>
+          <div class="flex-1 min-w-0 truncate">${publicReplayUrl}</div>
           <div class="text-base">
             <btrix-copy-button
               .getValue=${() => publicReplayUrl}
               content=${msg("Copy Public URL")}
             ></btrix-copy-button>
           </div>
-          <div class="flex-1 min-w-0 truncate">${publicReplayUrl}</div>
-          <div class="text-base">
-            <sl-icon-button
-              href=${publicReplayUrl}
-              name="box-arrow-up-right"
-              target="_blank"
-            >
-            </sl-icon-button>
-          </div>
         </div>
       </section>
       <btrix-section-heading>${msg("Embed Collection")}</btrix-section-heading>
diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts
index a3cc987f..9b8095af 100644
--- a/frontend/src/pages/org/crawl-detail.ts
+++ b/frontend/src/pages/org/crawl-detail.ts
@@ -699,10 +699,14 @@ export class CrawlDetail extends LiteElement {
         </btrix-desc-list-item>
         <btrix-desc-list-item label=${msg("Crawl ID")}>
           ${this.crawl
-            ? html`<btrix-copy-button
-                  value=${this.crawl.id}
-                ></btrix-copy-button>
-                <code title=${this.crawl.id}>${this.crawl.id}</code> `
+            ? html`
+                <div class="flex items-center gap-2">
+                  <code class="grow" title=${this.crawl.id}
+                    >${this.crawl.id}</code
+                  >
+                  <btrix-copy-button value=${this.crawl.id}></btrix-copy-button>
+                </div>
+              `
             : html`<sl-skeleton class="h-6"></sl-skeleton>`}
         </btrix-desc-list-item>
       </btrix-desc-list>
diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
index 3d39125b..275c381b 100644
--- a/frontend/src/pages/org/workflow-detail.ts
+++ b/frontend/src/pages/org/workflow-detail.ts
@@ -318,7 +318,7 @@ export class WorkflowDetail extends LiteElement {
           </div>
         </header>
 
-        <section class="col-span-1 border rounded-lg py-2">
+        <section class="col-span-1 border rounded-lg py-2 px-4">
           ${this.renderDetails()}
         </section>