update layout

frontend/src/components/orgs-list.ts

@@ -1,5 +1,9 @@
 import { localized, msg, str } from "@lit/localize";
-import type { SlChangeEvent, SlInput } from "@shoelace-style/shoelace";
+import type {
+  SlChangeEvent,
+  SlInput,
+  SlMenuItem,
+} from "@shoelace-style/shoelace";
 import { css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
@@ -20,7 +24,7 @@ import type { OrgData } from "@/utils/orgs";
 export class OrgsList extends TailwindElement {
   static styles = css`
     btrix-table {
-      grid-template-columns: min-content [clickable-start] auto auto auto [clickable-end] min-content;
+      grid-template-columns: min-content [clickable-start] 50ch auto auto [clickable-end] min-content;
     }
   `;
   @property({ type: Object })
@@ -292,7 +296,7 @@ export class OrgsList extends TailwindElement {
                 </sl-tooltip>
               `
             : html`
-                <sl-tooltip content=${msg("Under quota")}>
+                <sl-tooltip content=${msg("No quotas exceeded")}>
                   <sl-icon class="text-base text-success" name="check-circle">
                   </sl-icon>
                 </sl-tooltip>
@@ -337,10 +341,12 @@ export class OrgsList extends TailwindElement {
               </sl-menu-item>
               <sl-menu-item
                 style="--sl-color-neutral-700: var(--danger)"
-                @click=${() => {
+                @click=${(e: MouseEvent) => {
+                  if ((e.target as SlMenuItem).disabled) return;
                   this.currOrg = org;
                   void this.orgDeleteDialog?.show();
                 }}
+                disabled
               >
                 <sl-icon slot="prefix" name="trash3"></sl-icon>
                 ${msg("Delete Org")}

frontend/src/pages/home.ts

@@ -138,8 +138,8 @@ export class Home extends LiteElement {
         </form>
       </section>
 
-      <div class="grid grid-cols-5 gap-8">
-        <div class="col-span-5 md:col-span-3">
+      <div class="grid grid-cols-3 gap-6">
+        <div class="col-span-3 md:col-span-2">
           <section>
             <header
               class="mb-3 flex items-center justify-between border-b pb-3"
@@ -161,7 +161,7 @@ export class Home extends LiteElement {
             ></btrix-orgs-list>
           </section>
         </div>
-        <div class="col-span-5 md:col-span-2">
+        <div class="col-span-3 md:col-span-1">
           <section class="p-3 md:rounded-lg md:border md:bg-white md:p-8">
             <h2 class="mb-3 text-lg font-medium">
               ${msg("Invite User to Org")}