Increase app max width (#1484)

Increases max width of entire app

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>

frontend/src/components/ui/tab-list.ts

@@ -6,7 +6,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 const DEFAULT_PANEL_ID = "default-panel";
 // Match witch tailwind 4xl max width
 // https://tailwindcss.com/docs/max-width
-const SCREEN_LG = 896;
+const SCREEN_LG_PX = 896;
 
 /**
  * Tab list
@@ -93,12 +93,12 @@ export class TabList extends LitElement {
       grid-gap: 1rem;
     }
 
-    @media only screen and (min-width: ${SCREEN_LG}px) {
+    @media only screen and (min-width: ${SCREEN_LG_PX}px) {
       .container {
         grid-template-areas:
           ". header"
           "menu main";
-        grid-template-columns: auto minmax(auto, 896px);
+        grid-template-columns: auto minmax(auto, 70rem);
       }
     }
 
@@ -106,7 +106,7 @@ export class TabList extends LitElement {
       grid-area: menu;
     }
 
-    @media only screen and (min-width: ${SCREEN_LG}px) {
+    @media only screen and (min-width: ${SCREEN_LG_PX}px) {
       .navWrapper {
         overflow: initial;
       }
@@ -141,7 +141,7 @@ export class TabList extends LitElement {
       margin-left: var(--track-width);
     }
 
-    @media only screen and (min-width: ${SCREEN_LG}px) {
+    @media only screen and (min-width: ${SCREEN_LG_PX}px) {
       .tablist {
         display: block;
       }
@@ -166,7 +166,7 @@ export class TabList extends LitElement {
       background-color: var(--sl-color-blue-500);
     }
 
-    @media only screen and (min-width: ${SCREEN_LG}px) {
+    @media only screen and (min-width: ${SCREEN_LG_PX}px) {
       .tablist,
       .show-indicator .track,
       .show-indicator .indicator {

frontend/src/features/collections/collection-items-dialog.ts

@@ -212,6 +212,7 @@ export class CollectionItemsDialog extends TailwindElement {
   render() {
     return html` <btrix-dialog
       ?open=${this.open}
+      style="--width: var(--btrix-screen-desktop); --body-spacing: 0;"
       @sl-show=${() => (this.isReady = true)}
       @sl-after-hide=${() => this.reset()}
     >

frontend/src/index.ts

@@ -247,7 +247,7 @@ export class App extends LiteElement {
     return html`
       <div class="border-b">
         <nav
-          class="max-w-screen-lg mx-auto pl-3 box-border h-12 flex items-center justify-between"
+          class="max-w-screen-desktop mx-auto pl-3 box-border h-12 flex items-center justify-between"
         >
           <div>
             <a
@@ -448,7 +448,7 @@ export class App extends LiteElement {
   private renderFooter() {
     return html`
       <footer
-        class="w-full max-w-screen-lg mx-auto p-3 box-border flex flex-col gap-4 md:flex-row justify-between"
+        class="w-full max-w-screen-desktop mx-auto p-3 box-border flex flex-col gap-4 md:flex-row justify-between"
       >
         <!-- <div> -->
         <!-- TODO re-enable when translations are added -->
@@ -608,7 +608,7 @@ export class App extends LiteElement {
 
       case "accountSettings":
         return html`<btrix-account-settings
-          class="w-full max-w-screen-lg mx-auto p-2 md:py-8 box-border"
+          class="w-full max-w-screen-desktop mx-auto p-2 md:py-8 box-border"
           @update-user-info=${(e: CustomEvent) => {
             e.stopPropagation();
             this.updateUserInfo();
@@ -621,7 +621,7 @@ export class App extends LiteElement {
         if (this.appState.userInfo) {
           if (this.appState.userInfo.isAdmin) {
             return html`<btrix-users-invite
-              class="w-full max-w-screen-lg mx-auto p-2 md:py-8 box-border"
+              class="w-full max-w-screen-desktop mx-auto p-2 md:py-8 box-border"
               .authState="${this.authService.authState}"
               .userInfo="${this.appState.userInfo}"
             ></btrix-users-invite>`;

frontend/src/pages/crawls.ts

@@ -99,7 +99,7 @@ export class Crawls extends LiteElement {
 
   render() {
     return html` <div
-      class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border"
+      class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border"
     >
       ${this.crawlId
         ? // Render loading indicator while preparing to redirect

frontend/src/pages/home.ts

@@ -89,13 +89,13 @@ export class Home extends LiteElement {
     return html`
       <div class="bg-white">
         <header
-          class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
+          class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border md:py-8"
         >
           <h1 class="text-xl font-medium">${title}</h1>
         </header>
         <hr />
       </div>
-      <main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border">
+      <main class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border">
         ${content}
       </main>
     `;

frontend/src/pages/org/index.ts

@@ -282,7 +282,7 @@ export class Org extends LiteElement {
       ${this.renderOrgNavBar()}
       <main>
         <div
-          class="w-full max-w-screen-lg mx-auto px-3 box-border py-7"
+          class="w-full max-w-screen-desktop mx-auto px-3 box-border py-7"
           aria-labelledby="${this.orgTab}-tab"
         >
           ${tabPanelContent}
@@ -299,7 +299,7 @@ export class Org extends LiteElement {
           ? "bg-slate-100 border-b py-5"
           : ""}"
       >
-        <div class="w-full max-w-screen-lg mx-auto px-3 box-border">
+        <div class="w-full max-w-screen-desktop mx-auto px-3 box-border">
           <sl-alert
             variant="warning"
             closable
@@ -325,7 +325,7 @@ export class Org extends LiteElement {
           ? "bg-slate-100 border-b py-5"
           : ""}"
       >
-        <div class="w-full max-w-screen-lg mx-auto px-3 box-border">
+        <div class="w-full max-w-screen-desktop mx-auto px-3 box-border">
           <sl-alert
             variant="warning"
             closable
@@ -350,7 +350,7 @@ export class Org extends LiteElement {
 
   private renderOrgNavBar() {
     return html`
-      <div class="w-full max-w-screen-lg mx-auto px-3 box-border">
+      <div class="w-full max-w-screen-desktop mx-auto px-3 box-border">
         <nav class="-ml-3 flex items-end overflow-x-auto">
           ${this.renderNavTab({
             tabName: "home",

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

@@ -1237,7 +1237,7 @@ export class WorkflowDetail extends LiteElement {
       <btrix-dialog
         .label=${msg("Crawl Queue Editor")}
         .open=${this.openDialogName === "exclusions"}
-        style=${`--width: var(--btrix-screen-lg)`}
+        style=${`--width: var(--btrix-screen-desktop)`}
         @sl-request-close=${() => (this.openDialogName = undefined)}
         @sl-show=${this.showDialog}
         @sl-after-hide=${() => (this.isDialogVisible = false)}

frontend/src/pages/orgs.ts

@@ -29,13 +29,13 @@ export class Orgs extends LiteElement {
     return html`
       <div class="bg-white">
         <header
-          class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
+          class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border md:py-8"
         >
           <h1 class="text-xl font-medium">${msg("Organizations")}</h1>
         </header>
         <hr />
       </div>
-      <main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border">
+      <main class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border">
         ${this.orgList
           ? this.renderOrgs()
           : html`

frontend/src/theme.css

@@ -24,7 +24,7 @@
     --font-size-base: 1rem;
 
     /* Custom screen widths */
-    --btrix-screen-lg: 1124px; /* Should match tailwind.config.screens.lg */
+    --btrix-screen-desktop: 82.5rem; /* Should match tailwind.config.screens.desktop */
 
     /*
      * Shoelace Theme Tokens

frontend/tailwind.config.js

@@ -106,7 +106,7 @@ function makeTheme() {
       "4/3": "4 / 3", // For Browsertrix watch/replay
     },
     screens: {
-      lg: "1124px", // Should match --btrix-screen-lg
+      desktop: "82.5rem",
       // Override default of:
       // => @media (min-width: 1024px) { ... }
     },