Fix text overflow problem on crawl details page (#570)

* Fixes text overflow problem on crawl details page

- Crawl title length is now unlimited
- Flex items in that row are aligned to the bottom of the box (details bar) instead of the top
- Mirrors changes on config detail page

* Shrinks action button size on config detail page: Matches crawl detail page
* Margin fix: Added 0.5rem, aligned with mockups

frontend/src/pages/org/crawl-configs-detail.ts

@@ -95,7 +95,7 @@ export class CrawlTemplatesDetail extends LiteElement {
           <h2>
             ${this.crawlConfig?.name
               ? html`<span
-                  class="inline-block align-middle text-xl font-semibold leading-10 mr-1"
+                  class="inline-block align-middle text-xl font-semibold leading-10 md:mr-2"
                   >${this.crawlConfig.name}</span
                 > `
               : ""}
@@ -117,6 +117,7 @@ export class CrawlTemplatesDetail extends LiteElement {
                     this.crawlConfig!.id
                   }?edit`}
                   variant="primary"
+                  size="small"
                   class="mr-2"
                   @click=${this.navLink}
                 >
@@ -298,7 +299,7 @@ export class CrawlTemplatesDetail extends LiteElement {
 
     return html`
       <sl-dropdown placement="bottom-end" distance="4">
-        <sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
+        <sl-button slot="trigger" size="small" caret>${msg("Actions")}</sl-button>
 
         <ul
           class="text-left text-sm text-neutral-800 bg-white whitespace-nowrap"

frontend/src/pages/org/crawl-detail.ts

@@ -242,7 +242,7 @@ export class CrawlDetail extends LiteElement {
         </a>
       </div>
 
-      <div class="mb-2">${this.renderHeader()}</div>
+      <div class="mb-4">${this.renderHeader()}</div>
 
       <main>
         <section class="rounded-lg border mb-7">
@@ -329,8 +329,8 @@ export class CrawlDetail extends LiteElement {
 
   private renderHeader() {
     return html`
-      <header class="md:flex justify-between">
-        <h2 class="text-xl font-semibold mb-3 md:h-8">
+      <header class="md:flex justify-between items-end">
+        <h2 class="text-xl font-semibold mb-3 md:mr-2">
           ${msg(
             html`${this.crawl
                 ? this.crawl.configName