fix(ui): stack the project list below 1280px and use two columns from 90rem

At 1024px the project list took 24rem and squeezed the alert column to
about 500px, which clipped the search box and filter counts. The list
now sits beside the alerts from 1280px. The alert cards use two columns
from 90rem, so a 1440px screen no longer shows one very wide column.

src/App.vue

@@ -116,7 +116,7 @@ onBeforeUnmount(() => {
         />
       </div>
       <div
-        class="mt-10 grid grid-cols-[minmax(0,1fr)] gap-x-10 gap-y-10 sm:mt-14 lg:grid-cols-[minmax(0,1fr)_24rem] 2xl:grid-cols-[minmax(0,1fr)_28rem]"
+        class="mt-10 grid grid-cols-[minmax(0,1fr)] gap-x-10 gap-y-10 sm:mt-14 xl:grid-cols-[minmax(0,1fr)_24rem] 2xl:grid-cols-[minmax(0,1fr)_28rem]"
       >
         <AttentionList
           ref="list"
@@ -133,7 +133,7 @@ onBeforeUnmount(() => {
           @clear="store.clearFilters()"
           @refresh="store.refreshRepo"
         />
-        <aside class="lg:sticky lg:top-6 lg:self-start">
+        <aside class="xl:sticky xl:top-6 xl:self-start">
           <ProjectList
             :repos="visibleRepos"
             :total="state.repos.length"

src/components/ProjectList.vue

@@ -89,7 +89,7 @@ const LABEL = { crit: 'Critical', warn: 'Warning', ok: 'Healthy' } as const
     <ul
       v-else
       ref="scroller"
-      class="border-border bg-surface divide-border max-h-[70vh] divide-y overflow-y-auto rounded-lg border [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] lg:max-h-[calc(100vh-7rem)]"
+      class="border-border bg-surface divide-border max-h-[70vh] divide-y overflow-y-auto rounded-lg border [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] xl:max-h-[calc(100vh-7rem)]"
     >
       <li
         v-for="repo in visible"

src/composables/useColumns.ts

@@ -1,7 +1,7 @@
 import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
 
 /** 1 column below the breakpoint, 2 at or above it; follows the viewport live. */
-export function useColumns(minWidth = '(min-width: 96rem)'): Ref<number> {
+export function useColumns(minWidth = '(min-width: 90rem)'): Ref<number> {
   const columns = ref(1)
   let query: MediaQueryList | null = null
   const update = () => {