adjust for smaller screens

Author: SuaYoo

frontend/src/features/browser-profiles/templates/badges.ts

@@ -6,16 +6,15 @@ import capitalize from "lodash/fp/capitalize";
 import { CrawlerChannelImage, type Profile } from "@/types/crawler";
 
 export const usageBadge = (inUse: boolean) =>
-  html`<btrix-badge
-    variant=${inUse ? "cyan" : "neutral"}
-    class="font-monostyle"
-  >
-    <sl-icon
-      name=${inUse ? "check-circle" : "dash-circle"}
-      class="mr-1.5"
-    ></sl-icon>
-    ${inUse ? msg("In Use") : msg("Not In Use")}
-  </btrix-badge>`;
+  html`<sl-tooltip content=${msg("Crawl Workflow Usage")}>
+    <btrix-badge variant=${inUse ? "cyan" : "neutral"} class="font-monostyle">
+      <sl-icon
+        name=${inUse ? "check-circle" : "dash-circle"}
+        class="mr-1.5"
+      ></sl-icon>
+      ${inUse ? msg("In Use") : msg("Not In Use")}
+    </btrix-badge>
+  </sl-tooltip>`;
 
 export const badges = (
   profile: Partial<Pick<Profile, "inUse" | "crawlerChannel" | "proxyId">>,

frontend/src/features/crawl-workflows/workflow-list.ts

@@ -56,6 +56,13 @@ const rowCss = css`
   .row {
     display: grid;
     grid-template-columns: 1fr;
+    position: relative;
+  }
+
+  .action {
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 
   @media only screen and (min-width: ${mediumBreakpointCss}) {
@@ -68,6 +75,10 @@ const rowCss = css`
       grid-template-columns: var(--btrix-workflow-list-columns);
       white-space: nowrap;
     }
+
+    .action {
+      position: relative;
+    }
   }
 
   .col {

frontend/src/layouts/pageHeader.ts

@@ -128,7 +128,7 @@ export function pageHeader({
         classNames,
       )}
     >
-      <div class="flex flex-1 flex-col gap-2">
+      <div class="flex min-w-72 flex-1 flex-col gap-2">
         <div class="flex flex-wrap items-center gap-2.5">
           ${prefix}${pageTitle(title)}${suffix}
         </div>

frontend/src/layouts/panel.ts

@@ -53,9 +53,7 @@ export function panel({
 } & Parameters<typeof panelHeader>[0]) {
   return html`<section id=${ifDefined(id)} class=${ifDefined(className)}>
     ${panelHeader({ heading, actions })}
-    <sl-divider
-      class=${clsx(tw`mb-4 lg:hidden`, actions ? tw`-mt-1` : tw`mt-4`)}
-    ></sl-divider>
+    <sl-divider class="mb-4 mt-0 lg:hidden"></sl-divider>
     ${body}
   </section>`;
 }

frontend/src/pages/org/browser-profiles/browser.ts

@@ -256,7 +256,7 @@ export class BrowserProfilesBrowserPage extends BtrixElement {
               }
             }}
           >
-            ${msg(this.profileId ? "Save Profile" : "Finish Browsing")}
+            ${this.profileId ? msg("Save Profile") : msg("Finish Browsing")}
           </sl-button>
         </btrix-popover>
       </div>

frontend/src/pages/org/browser-profiles/profile.ts

@@ -280,8 +280,8 @@ export class BrowserProfilesProfilePage extends BtrixElement {
 
   private readonly renderPage = () => {
     return html`
-      <div class="mt-1 grid grid-cols-7 gap-7">
-        <div class="col-span-full flex flex-col gap-7 lg:col-span-5">
+      <div class="mt-2 grid grid-cols-7 gap-7">
+        <div class="col-span-full flex flex-col gap-7 lg:col-span-5 lg:gap-10">
           ${this.renderProfile()} ${this.renderUsage()}
         </div>
 
@@ -300,7 +300,7 @@ export class BrowserProfilesProfilePage extends BtrixElement {
       this.browserIdTask.value;
 
     return panel({
-      heading: msg("Visited Sites"),
+      heading: msg("Configured Sites"),
       actions: this.appState.isCrawler
         ? html`<sl-tooltip content=${msg("Configure Profile")}>
             <sl-icon-button
@@ -351,12 +351,16 @@ export class BrowserProfilesProfilePage extends BtrixElement {
     const origins = (profile: Profile) =>
       profile.origins.map(
         (origin) => html`
-          <li class="flex items-center gap-2">
+          <li class="flex items-center gap-1">
             <div
               class="flex flex-1 items-center gap-2 overflow-hidden border-r"
             >
               <div class="border-r p-1">
-                <btrix-copy-button .value=${origin} placement="left">
+                <btrix-copy-button
+                  content=${msg("Copy URL")}
+                  .value=${origin}
+                  placement="left"
+                >
                 </btrix-copy-button>
               </div>
               <btrix-code
@@ -488,7 +492,7 @@ export class BrowserProfilesProfilePage extends BtrixElement {
       html`<sl-skeleton class="h-36" effect="sheen"></sl-skeleton>`;
 
     return panel({
-      heading: msg("Usage"),
+      heading: msg("Related Workflows"),
       body: when(
         this.profile,
         (profile) =>
@@ -561,7 +565,7 @@ export class BrowserProfilesProfilePage extends BtrixElement {
     const failedNotLoggedInState = "failed_not_logged_in" satisfies CrawlState;
 
     return html`
-      <div class="mb-3 rounded-lg border bg-neutral-50 px-6 py-3">
+      <div class="mb-3 rounded-lg border bg-neutral-50 px-5 py-3">
         <div class="flex flex-wrap items-center gap-2">
           <span class="whitespace-nowrap text-sm text-neutral-500">
             ${msg("Filter by:")}