From 2cbe6af878a1dc03da7d0cc4bcfe56a8d26c97cb Mon Sep 17 00:00:00 2001
From: Josep Piguillem <jgpigui@gmail.com>
Date: Thu, 15 Oct 2026 20:55:22 +0200
Subject: [PATCH] fix(web): ticket types fit their settings panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A type row needed some 41rem in a panel of about 26rem, so names were
cut short and the selects spilled out. It takes two lines now (three
on a phone), and on a phone an area keeps «Archivar» beside its name.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../presenters/src/lib/pages/settings.page.ts | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/libs/web/tracker/presenters/src/lib/pages/settings.page.ts b/libs/web/tracker/presenters/src/lib/pages/settings.page.ts
index 4ed47ee..ac09637 100644
--- a/libs/web/tracker/presenters/src/lib/pages/settings.page.ts
+++ b/libs/web/tracker/presenters/src/lib/pages/settings.page.ts
@@ -1053,11 +1053,35 @@ function idFrom(name: string): string {
         color: var(--ts-ink) !important;
       }
     }
+    /* Two lines, to fit a panel of the pair: name and archive on top;
+       icon, color and template below. */
     .ts-type-grid {
       display: grid;
-      grid-template-columns: 2rem minmax(8rem, 1fr) 7rem 7rem auto 6.5rem;
+      grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 6.5rem;
       align-items: center;
       gap: 0.5rem;
+      > .ts-type-icon {
+        grid-area: 1 / 1;
+      }
+      > .ts-name {
+        grid-area: 1 / 2 / 2 / 4;
+      }
+      > .ts-archive,
+      > .ts-icon-button {
+        grid-area: 1 / 4;
+      }
+      > select:nth-of-type(1) {
+        grid-area: 2 / 2;
+      }
+      > select:nth-of-type(2) {
+        grid-area: 2 / 3;
+      }
+      > .ts-template-toggle {
+        grid-area: 2 / 4;
+      }
+      > .ts-template {
+        grid-row: 3;
+      }
     }
     .ts-area-grid {
       display: grid;
@@ -1291,17 +1315,41 @@ function idFrom(name: string): string {
       .ts-rows-head {
         display: none;
       }
-      .ts-status-grid,
-      .ts-type-grid {
+      .ts-status-grid {
         grid-template-columns: 1fr 1fr;
       }
-      .ts-grip,
-      .ts-type-icon {
+      .ts-grip {
         display: none;
       }
-      .ts-name {
+      .ts-status-grid > .ts-name {
         grid-column: 1 / -1;
       }
+      /* Name; icon and color; template and archive. */
+      .ts-type-grid {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        > .ts-type-icon {
+          display: none;
+        }
+        > .ts-name {
+          grid-area: 1 / 1 / 2 / 3;
+        }
+        > select:nth-of-type(1) {
+          grid-area: 2 / 1;
+        }
+        > select:nth-of-type(2) {
+          grid-area: 2 / 2;
+        }
+        > .ts-template-toggle {
+          grid-area: 3 / 1;
+        }
+        > .ts-archive,
+        > .ts-icon-button {
+          grid-area: 3 / 2;
+        }
+        > .ts-template {
+          grid-row: 4;
+        }
+      }
       .ts-savebar {
         flex-wrap: wrap;
         border-radius: var(--ts-radius);